-2

enter image description hereI know this question has been asked many time here however I couldn't manage to find a solution to my problem.

I'm adding a webpage to a complex website with tons of css. I'm trying to apply a height:50%; to a div, it doesn't work (The data are wrapped together).

With my research I understood it's because the parent element isn't set at height:100%; so I tried setting html and body to 100% : No change.

Using position: absolute; make it works but then it ignores the header size and write my text over it.

With the IE debugger I found the parent div, setting it at height: 100% doesn't work.

How can I find what parent CSS element I should set at 100% ?

IggY
  • 3,005
  • 4
  • 29
  • 54
  • 1
    Unless you include your HTML and CSS in the question, we can't help you. – TylerH Feb 18 '15 at 15:44
  • 1
    You've set the parent div to 100%, but 100% of what? what height does it's parent have? – atmd Feb 18 '15 at 15:45
  • I setted height:100% to every parent I could find. I uploaded a picture of code & edited my post, please let me know if you need more info :) – IggY Feb 18 '15 at 15:51
  • @IggY If you would, please include the *actual code* in your post, not just a partial screenshot. – TylerH Feb 18 '15 at 15:56
  • 1
    if the panels are floating it's probably that they have not real height in px, try to add `class="clearfix"` to div parent – mgamon Feb 18 '15 at 16:17
  • 1
    Read this question for more info about expand proper width and height on floated divs http://stackoverflow.com/questions/8554043/what-is-clearfix – mgamon Feb 18 '15 at 16:24
  • @mgamon doesn't solve the problem :s – IggY Feb 18 '15 at 16:51
  • provide your html and css code to aim you put on fiddle and share link http://jsfiddle.net/ – mgamon Feb 18 '15 at 16:53
  • @mgamon I manage to make it work on a little snippet, so a fiddle wouldn't help, there is 20+ css files and I'm not allowed to share them :s I understand it can prevent you to help me, sorry for that – IggY Feb 18 '15 at 16:58
  • I'm sorry for that but isn't posible to help you for now with this info. I'm sure that the issue it's produced by a floating elements that are not properly expanded. If you are using Bootstrap it's more probably check with the inspector element what div have no height =) – mgamon Feb 18 '15 at 17:04
  • @mgamon my has the good size, but under it there is a
    – IggY Feb 18 '15 at 17:21
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/71187/discussion-between-mgamon-and-iggy). – mgamon Feb 18 '15 at 17:26
  • Does this answer your question? [Percentage Height HTML 5/CSS](https://stackoverflow.com/questions/1622027/percentage-height-html-5-css) – Ahmed Shaqanbi Feb 01 '23 at 18:33

1 Answers1

0

if the parent is 100% but in reality the height is 0px then the <div> with 50% is half of 0 == 0.

Try setting the parent background:red the the 50% div background:blue to aid in debugging.

MrPickles
  • 810
  • 1
  • 9
  • 27
  • This isn't an answer. This is a comment and should be posted as such under the original question. – Joseph Marikle Feb 18 '15 at 15:52
  • Thank you for the advice, applying a background color doesn't change anything so I guess it's the right path to find the solution. If I change height :100% by 100px in the parent then the color appear. Is there a clever way I can find where problematic height = 0px is ? – IggY Feb 18 '15 at 15:55
  • I know is Crome you can inspect element and down the bottom you get a nice box with dimensions etc. I have also found that height: n% is a bit odd. can you not us `px`. alternatively us js to get the height and half it? – MrPickles Feb 18 '15 at 15:57