I have encountered an issue with the layout of my HTML document. Both the BODY and HTML elements are set to a height of 100%. Within these elements, I have two child elements - one with a fixed height of 100px and the other set to height:100%.
However, this setup causes the second child element to be visually displaced, pushing it down the page and creating a side scroll bar. Although the second child element is actually 100% the height of the body and html tags, its position is affected by the presence of the first child element with a fixed height of 100px.
I am aware that I could use overflow: hidden on one of the parent elements to clip the excess off or use a negative margin on the second child to adjust its position. However, I am exploring alternative solutions.
My goal is for the second element to immediately follow the first child element and stretch to the bottom of the window without exceeding it. I want the section#content to adapt to different viewports, so setting an explicit height is not desirable.
I have experimented with various positioning techniques on both parent and child elements but have not achieved the desired outcome.
For instance, setting the parent element to position absolute and anchoring it to all four corners of the screen does not impact the height of the child elements. The second child still maintains its proper height but remains affected by the 100px offset from the first child.
Below is some basic HTML code:
<body>
<section id="header"></section>
<section id="content"></section>
</body>
I have set the height of both the html and body elements to 100%, and assigned a height of 100px to #header.
Section #content has been given a height of 100%, however, it extends beyond the window height causing the issue.
Here is the CSS code I am using:
html, body{
height:100%;
margin:0; padding:0;
}
section{
margin:0; padding:0;
}
#header{
height:100px;
}
#content{
background:white;
height:100%;
}
If you have any insights into what might be causing this issue and how it can be resolved, your input would be greatly appreciated.
Thank you