I am trying to make a complex UI with a header content and footer. Within the content there are two sections one being a sidebar and the other being the main content. Within that main content there is then another header and footer.
Below is the link to what I have so far in codepen.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<!-- description text that displays below the link in google search results -->
<meta name="description" content="Description of site" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="header">Header</div id="header">
<div id="main">
<div id="left">
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
</div>
<div id="right">
<div id="right_header">
Right Header
</div>
<div id="right_main">
Right Content <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
</div>
<div id="right_footer">
Right Footer
</div>
</div>
</div id="main">
<div id="footer">Footer</div id="footer">
</body>
</html>
css
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#header, #footer {
position: absolute;
left: 0;
right: 0;
height: 20px;
background-color: red;
/* Specify a background color so the content text doesn't
bleed through the footer! */
}
#header {
top: 0;
}
#footer {
bottom: 0;
}
#main {
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Ensure that the height of the element includes the box border, not just the content */
border: 0;
/* Leave some space for the header and footer to overlay. */
border-top: 20px solid;
border-bottom: 20px solid;
}
#left {
background-color: green;
width: 300px;
height: 100%;
float: left;
overflow-y:auto;
position: relative;
}
#right {
height: 100%;
background-color: blue;
overflow-y:auto;
position: relative;
}
#right_header {
top: 0;
background-color: teal;
position: relative;
}
#right_footer {
bottom: 0;
background-color: teal;
position: relative;
}
#right_main {
overflow-y:auto;
position: relative;
}
I want the Right Header and Footer section to be sticky and stay on the screen and for the overflow-y to only happen in the Right Content Section only. How would this be done?
On a side note, one issue I found was you have to hard code the height of the header and footer into margin values. If the height of the header and footer were unknown would it still be possible to make a UI like this through only css?
Any help is appreciated!
CodePudding user response：
You can just make them sticky.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#header, #footer {
position: absolute;
left: 0;
right: 0;
height: 20px;
background-color: red;
/* Specify a background color so the content text doesn't
bleed through the footer! */
}
#header {
top: 0;
}
#footer {
bottom: 0;
}
#main {
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Ensure that the height of the element includes the box border, not just the content */
border: 0;
/* Leave some space for the header and footer to overlay. */
border-top: 20px solid;
border-bottom: 20px solid;
}
#left {
background-color: green;
width: 300px;
height: 100%;
float: left;
overflow-y:auto;
position: relative;
}
#right {
height: 100%;
background-color: blue;
overflow-y:auto;
position: relative;
}
#right_header {
top: 0;
background-color: teal;
position: sticky;
background: yellow;
z-index: 100;
}
#right_footer {
bottom: 0;
background-color: teal;
position: sticky;
background: yellow;
z-index: 100;
}
#right_main {
overflow-y:auto;
position: relative;
border: 1px solid yellow;
min-height: calc(100% - 40px);
}<div id="header">Header</div id="header">
<div id="main">
<div id="left">
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
</div>
<div id="right">
<div id="right_header">
Right Header
</div>
<div id="right_main">
Right Main <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
</div>
<div id="right_footer">
Right Footer
</div>
</div>
</div id="main">
<div id="footer">Footer</div id="footer">