This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 4 years ago.
I have a fixed header and a fixed footer that should always be visible in the window.
The problem: I would like to have a "main box" expand between the header and the footer. In that main box is the text box the height of that box should be relative to the distance to the header and footer. I think this picture explains better what I'm trying to archive:
The header and footer could also have a fixed height.
<div id="wrapper">
<div id="header"></div>>
<div id="main">
<div id="textbox"></div>
</div>
<div id="footer"></div>
You could add position: fixed for both and position them.
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px; /*height you want*/
z-index: 1;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100px; /*height you want*/
z-index: 1;
}
Then you position your main box using height and padding you wish. It could be something like this:
#main {
position: absolute;
height: calc(100vh - x); /* "x" would be the sum of header and footer heights*/
width: 100%;
top: 100px; /* the height of your header*/
}
#textbox {
margin: 30px 0 20px 0;
width: 100%;
height: calc(100% - 50px);
z-index: 1;
}
with html you can try with </br>
<div id="wrapper">
<div id="header"></div>
</br></br>
<div id="main">
<div id="textbox"></div>
</div>
</br>
<div id="footer"></div>
Related
I have the following:
<div class="row">
<div id="left">
<div class="content"></div>
</div>
<div id="right">
<div class="content"></div>
</div>
</div>
#media (min-width: 768px) {
#left {
position: absolute;
top: 52px;
bottom: 0;
left: 0;
width: 25%;
overflow-y: auto;
height: calc(100% - 62px);
}
#right {
position: absolute;
top: 52px;
bottom: 0;
right: 0;
width: 75%;
overflow-y: auto;
height: calc(100% - 62px);
}
}
When I inspect the DOM, the height of the content classes is as expected, but the left and right divs have zero height and thus nothing shows on the page.
Removing the overflow-y property fixes the problem but I do need scrolling in case the div exceeds the height of the screen.
I tried the "clearfix" wrapper around the left and right divs but that doesn't seem to do anything.
Could someone explain why is the parent class not inheriting the height of its content?
This is only an issue in Firefox by the way, Chrome seems to work fine.
The problem appears to not come from the overflow-y, but rather that you have missed out the closing quotation mark in <div class="row">. Failure to include this closing quotation mark actually causes the <div> on the left to not display. My guess is that Chrome automatically corrects this, and Firefox does not.
I've added in some background colours, and created a JSFiddle showcasing this problem here, and another fixing this problem here.
Hope this helps! :)
If you use a height setting containing percentage values for an element (as you did), the parent of that element needs a heightsetting too. If you mean 100% - 62px of the window height, you have to add height: 100% to each parent, grandparent etc. - a percentag-based settong needs a reference in the parent element. In you case that would be
html, body, .row {
height: 100%;
}
#media (min-width: 768px) {
html,
body,
.row {
height: 100%;
}
#left {
position: absolute;
top: 52px;
bottom: 0;
left: 0;
width: 25%;
overflow-y: auto;
height: calc(100% - 62px);
}
#right {
position: absolute;
top: 52px;
bottom: 0;
right: 0;
width: 75%;
overflow-y: auto;
height: calc(100% - 62px);
}
}
<div class="row">
<div id="left">
<div class="content"></div>
</div>
<div id="right">
<div class="content"></div>
</div>
</div>
I changed child div's position to absolute so that it can fill up rest of the page. But now it's width doesn't match with parent body. Code is not straightforward as I am using Angular 2.
index.html
<body>
<hp-root></hp-root>
</body>
app.html
<div>
<md-toolbar class="toolbar">
<img src="../assets/logo_3x.png" class="top-logo"/>
<a class="top-link">Home</a>
<a class="top-link">Candidates</a>
<a class="top-link">Jobs</a>
<a class="top-link">Blog</a>
<a class="top-link">Login</a>
</md-toolbar>
</div>
<hp-candidate-list></hp-candidate-list>
candidate-list.html
<div class="page">
<h1>
{{title}}
</h1>
<div class="items">
<md-nav-list *ngFor="let candidate of candidates">
<md-list-item>
<img src="../../../assets/reminder-active#3x.png" class="reminder">
<span class="name">{{candidate.name}}</span>
<span>{{candidate.experiences[0].title}} at {{candidate.experiences[0].companyName}}</span>
<span>{{candidate.skills[0].name}}, {{candidate.skills[1].name}}, {{candidate.skills[2].name}}</span>
</md-list-item>
</md-nav-list>
</div>
</div>
CSS:
body {
width: 960px;
margin: 0 auto;
}
.page {
overflow: hidden;
height: 100%;
position: absolute;
background-color: gainsboro;
}
div.items {
max-width: 90%;
position: relative;
left: 5%;
right: 5%;
background-color: #FFFFFF;
}
After adding the position: absolute .page div fills up rest of the page but looks like this:
Before width was fine but it's height wasn't filling up the page.
Once you set an element to position: absolute, that removes it from the normal content flow, the size of the the element will be the size of the content inside, unless to declare the width and height, or set relevant top, right, bottom and left values.
Example of making an position absolute element to take full width of the closest container with position set other than static, or if it sits directly under body tag.
.page {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
or
.page {
position: absolute;
left: 0;
right: 0;
top: 0;
}
EDIT
Example of making div main to fill entire height available by using flexbox.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.header {
background: gold;
}
.main {
background: silver;
flex: 1;
}
.footer {
background: pink;
}
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
i'm trying to make the left and right graphics of a div to take the whole height of the browser window.
At first i tried something like this https://jsfiddle.net/jr6av8n5/2/
But since the 100% height of the columns takes up the height of the parent div they do not take up the whole screen space.
<div id="main">
<div id="leftLayoutCol">
</div>
<div id="rightLayoutCol">
</div>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
</div>
h1 {padding:0px;margin:0px;}
#main {
position: fixed;
width: 55%;
height: 100%;
max-width: 1200px;
margin-left: 50%;
left: -25%;
background-color: grey;
}
#leftLayoutCol {
display: inline-block;
height: 100%;
position: absolute;
width: 40px;
left: -40px;
background-color: green;
}
#rightLayoutCol {
display: inline-block;
height: 100%;
position: absolute;
width: 40px;
right: -40px;
background-color: green;
}
Then i tried something like this https://jsfiddle.net/4d8d8tds/2/
This is closer to what i want to achieve but it's not a solid solution since if the browser window is resized the #main div is not horizontally centered anymore together with some other issues.
I already tried giving the body 100% height and it works except for the fact that it takes into account the height of every other page element and sums it up to the body heght making a scrollbar appear and generally looking bad (everything gets shifted down).
Any suggestions? (possibly not with css3 since it will need to run on older browsers)
Thanks
The demo below shows a possible solution for it, with fixed position of header and footer, and main takes 100% height of the window. Due to the unpredicted height of header and footer, I added a bit of javascript to do to the calculation.
var callback = function () {
var windowHeight = $(window).height();
var headerHeight = $("#header").height();
var footerHeight = $("#footer").height();
var mainHeight = windowHeight - headerHeight - footerHeight;
$("#main").css({
"min-height": mainHeight + "px",
"margin-top": headerHeight + "px",
"margin-bottom": footerHeight + "px"
});
};
$(document).ready(callback);
$(window).resize(callback);
body, h1 {
margin: 0;
}
#header, #footer {
background: green;
position: fixed;
z-index: 1;
left: 0;
width: 100%;
}
#header {
top: 0;
}
#footer {
bottom: 0;
}
#main {
background: silver;
position: relative;
width: 50%;
height: 100%;
max-width: 1200px;
margin: 0 auto;
}
#left, #right {
background: navy;
display: block;
width: 40px;
height: 100%;
position: absolute;
top: 0;
}
#left {
left: -40px;
}
#right {
right: -40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">header</div>
<div id="main">
<div id="left"></div>
<div id="right"></div>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
</div>
<div id="footer">footer</div>
Also available on JSFiddle, so you can see it in action for different window sizes.
I don't know if I understood well your question.
seems to me that if you add 100% height to both html and body in your first Fiddle it works just fine.
maybe you have seen scroll bar because by default body has margin unless set to 0.
However these days I always include in my projects, specially when working with height 100%, this:
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
so paddings and borders will never mess up any of your elements. I recomend you to use it.
FIDDLE
Edited: if you have elements outside the 100% height container you can subtract the set height height: calc (100% - 150px); asuming 150px is the total height of those elements combined
Is there an easy way with just css to make a div expand to the full height of the page - 30px. I have a "footer" at the bottom of the page that is 30px tall and set to position: fixed; bottom: 0px; I don't want any of the content from the rest of the page to show behind this footer.
<body>
<div id="wrapper">
<div id="header">Header added just for demonstration purposes</div>
<div id="content">Main content goes here</div>
<div id="footer">And this is my footer</div>
</div>
now style
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
height: auto !important;
min-height: 100%;
height: 100%;
position: relative; /* Required to absolutely position the footer */
}
#footer {
height: 50px; /* Define height of the footer */
position: absolute;
bottom: 0; /* Sit it on the bottom */
left: 0;
width: 100%; /* As wide as it's allowed */
}
#content {
padding-bottom: 50px; /* This should match the height of the footer */
}
i would probably place all in a wrapper and set the size to 100%,
But in new css3 you have calc() which does exactly what you need: http://updates.html5rocks.com/2012/03/CSS-layout-gets-smarter-with-calc
Please note that not all (even modern) browsers yet have support for calc()
not actually sure this is only a chrome problem, but i've got this entire page set up with absolutely positioned elements within a container that's position relatively. normally, i wouldn't do this, but we needed rotating images, so we couldn't use the css background property.
anyways, for some reason, when i position the footer absolutely with a position of bottom: 0; right: 0; it doesn't show up.
HTML:
<div id="wrapper">
<div id="content">
</div>
<div id="footer">
<ul>
</ul>
</div>
</div>
CSS:
#wrapper {
position: relative;
margin: 0 auto;
width: 940px;
}
#content {
position: absolute;
top: 0;
left: 0;
height: 350px;
}
#footer {
position: absolute;
bottom: 0;
right: 0;
z-index: 10;
}
EDIT: We cannot set the height of the wrapper, as this is going to be a wordpress site, and the user could put in a ton of text. we can, however, set the height of footer.
If you're unable to set a height then just remove the footer from the wrapper so it has no parent. Absolute positioning height is determined from its parent. You parent "wrapper" has no height; therefore, it won't float to the bottom.
Luckily body will go to the bottom.
here's the code in jsFiddles
#wrapper {
position: relative;
margin: 0 auto;
width: 940px;
}
#content {
background:#ccc;
position: absolute;
top: 0;
left: 0;
height: 350px;
}
#footer {
position: absolute;
bottom: 0;
right: 0;
z-index: 10;
background:papayawhip;
}
<div id="wrapper">
<div id="content">
sdfasdf
</div>
</div>
<div id="footer">
<ul>
<li>aslfaskdjf</li>
</ul>
</div>
The height of #wrapper is 0px so the #footer does show up - but its 0px height .... see here you will notice that the #footer is a red border on the right
If you give the #wrapper a height and apply a height to #footer you can see it or to make the footer the same height as its contents remove its height property
Actually it above code true but, your #wrapper has relative position and your #footer inside #wrapper. the position of #footer is aligned according to wrapper.If you give height to wrapper you can see it ;See below;
HTML:
<div id="wrapper">
<div id="content">
</div>
<div id="footer">
<ul>
your_content
</ul>
</div>
</div>
CSS:
#wrapper {
position: relative;
margin: 0 auto;
height: 200px;
width: 940px;
}
#content {
position: absolute;
top: 0;
left: 0;
height: 350px;
}
#footer {
position: absolute;
bottom: 0;
right: 0;
z-index: 10;
}
You can see example here http://jsfiddle.net/8DZ5R/
Another way to solve this, simply change "#footer" position "absolute" to "static".You dont need to change wrapper height: You can see here http://jsfiddle.net/8DZ5R/1/