Simple CSS Layout -
I need to find a cross-browser method in which a parent has two divisions where the first child has a certain height And the second stream to be included in the parents.
& lt; Div id = "parent" & gt; & Lt; Div id = "header" & gt; & Lt; / Div & gt; & Lt; Div id = "body" & gt; & Lt; / Div & gt; & Lt; / Div & gt;
height: 500px _____________________ | _________________ | | | Height: 20px | | | | _________________ | | | _________________ | | | | | | | | | | | Height: 100% | | | | | | | | | | | | _________________ | | | _____________________ |
Therefore there is a certain height of 500px of the parent, in the header there is a fixed height of 20px but the height of the body div is below to fit within the parent should go. By giving it a height of 100%, the height increases to 20px because the height: 100% uses the parent's height, which does not take into account children. I saw a solution using full position but it does not work on IE 7 or 6. Is there a cross browser solution for this because it is a relatively simple layout?
Edit: Forgetting that parents will be resizable, therefore always will not be 500px Using Jquery resizable, Parental Dimensions can be anything And will change often.
Edit2: I think I can credit many people for this solution as I had consulted with everyone. In fact, I gave the height of 480px #body
and used the resusption option in resizeable to change the size of the parents and body.
. Parent {height: auto; }. Child 1 {Height: 20px; } .child2 {Height: 480px; }
Instead of dynamically setting the parents size, control the height of child 2.
Hope is what you want.
Edit: Edited according to your updates!
Comments
Post a Comment