I'm trying to fill my page with a white background by extending my div to the bottom of the page. I've set my html, body and div to a height of 100%, but while the html and body's height extend perfectly to the bottom of the screen, my div's height goes even below that.
It seems like it's adding the height of my previous div's to the last div and thus extending it below my screen. Does anyone know how I can fix this so my last div extends to the bottom of my screen?
<html>
<body>
<div id="app">
<nav id="nav"></nav>
<header class="header"></header>
<div class="categories"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
This is my html. I want the content class to extend to the bottom of my screen because there's not enough content in there to fill it itself. I've given the html, body, app and content a height: 100%, but while the first 3 fill the screen perfectly, the content class goes even below the screen.
You could try using
overflow: auto
Would be nice to have some code example so we can help more.
Related
I have a header fixed to the top of the page that can wrap creating more height when the page is resized to a smaller width.
How do I make the the page content (#wrapper) always begin at the bottom of the header with CSS only?
<body>
<header>
This fixed content will wrap on small devices.
</header>
<div id="wrapper">
This content should always begin immediately below the header.
</div>
<body>
As you only want to use CSS, you could just set padding-top on your #wrapper div so it moves the content below the bottom of the header. Then adjust the padding-top size for each screen size in media queries.
...As already stated in the comments above, you have to use a JS solution, unless you are able to know at which resolutions the fixed header's height increases in which case you can use media queries and either use padding-top for the #wrapper element equal to the fixed header's height, or use an empty element with height equal to the header's.
If you are able to change the HTML, then another approach that avoids the use of JavaScript is to include two copies of the header element:
<body>
<header id="show">
This fixed content will wrap on small devices.
</header>
<header id="flow">
This fixed content will wrap on small devices.
</header>
<div id="wrapper">
This content should always begin immediately below the header.
</div>
<body>
Then you can use #show { position: fixed; zIndex: 10000 } for the first element (to keep the header visible), and #flow { display: hidden } on the second element to consume the space in the page flow.
I have written some markup for a navigation bar on my webpage, now I am trying to move onto the next section, and I noticed when I was adding another section it doesn't expand the full width: image here
I added a white background to that section, and the body's background is black. Here's some markup and CSS:
HTML Sample:
<header>
<div class="container">
<!-- fun markup here -->
</div>
</header>
<section id="work">
<div class="container"></div>
</section>
CSS Sample
section#work {
padding: 100px 0;
background-color: white;
}
I believe I have left out all irrelevant information, but if I did leave out something important that you also need, please let me know.
The simple answer here is to use container-fluid.
Please check this fiddle: https://jsfiddle.net/ya6z789x/1/
As you can see the first container class (simply container) has a set width of 1170px at larger viewports, 970px at slightly smaller and so on (it reduces as you reduce viewport size).
The second example, container-fluid, is set to 100% width of its parent. Meaning if your header element doesn't have a width defined, the container-fluid class will stretch to the full width of the window.
Alternatively, if your header element had a width of say 900px (third example), placing a container-fluid directly as a child of it will make the container-fluid element have a width of 900px. Note, you may need to expand the viewport of the fiddle to see this in action.
I have a webpage which the main body is about 95% in width, So the problem i have is i want the footer to be 100% even though i am aware that the footer is a child of the main body this making the footer an equal width as the body.
Is there anyway i can override the footer without having to increase the body to 100% width?
I already attempted to set the footer inside a div but i still haven't been able to come up with a solution to my problem
Make a wrapper that is 100% width. Give your content 95% width, give everything else 100%.
<div class="wrapper">
<header>...</header>
<div id="content">...</div>
<footer>...</footer>
</div>
I'm working on a home page that is going to use a "custom" border around the whole website.
This is what I want to achieve with my div's.
[LEFT-TOP-BORDER ][MIDLLE-TOP-BORDER ][RIGHT-TOP-BORDER ]
[LEFT-MIDDLE-BORDER][Content ][RIGHT-MIDDLE-BORDER]
[LEFT-BOTTOM-BORDER][MIDLLE-BOTTOM-BORDER][RIGHT-BOTTOM-BORDER]
All the border corners (left/right top & bottom border) have a fixed width and height.
The middle-top/bottom-border has a fixed height but should expand to
the full width of the site.
The middle left and right border have a fixed width but should fill
up the whole height of the screen even when the content gets bigger.
The borders should stay clear of the content div, so if the window is
to small it should not be on to the content div.
The content div is going to have a fixed width and height.
I want the footer to be sticky without again overlapping the content
div when the window is to small.
Hope it's clear what I want to do!
I almost got it to work, but i got an problem with the left/right-middle-border. See for your self here
As you can see when the window is to small the borders overlap the content div.
But I think the way I have done it is not good?
How should I do it?
Thanks in advanced!
Kind Regards Alex
Looking at your code what you need to do is put your divs inside each other, not next to each other. So your middle section will be:
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
Then give your middle-left left padding of the correct width and position the background to the left, the middle-right some right padding of the correct width and position the background to the right, and then as your content gets taller, the margin divs will automatically expand.
Do this for all of the three layers, like so:
<div class="wrapper">
<div class="top-left">
<div class="top-right">
<div class="top-content">
</div>
</div>
</div>
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
<div class="bottom-left">
<div class="bottom-right">
<div class="bottom-content">
</div>
</div>
</div>
</div>
The body height doesn't need the 100% in your CSS now. And the wrapper can be centered and doesn't need a height either. I would try actually getting rid of all of your CSS and starting that again with this new HTML structure. Just add the padding and some background colours and get that right.
how would you make a footer container follow directly after the content and then stretch to the bottom of the page?
The setup is:
header-container is fixed 150px height
content-container stretches with whatever content should be inside
footer-container follows stretches for the remainder of the page.
So far I either have the footer directly after content with white space following, or a footer stuck to the bottom with white space between the content and the footer
The actual styling can vary depending on whether you are sure your page will never by long enough to scroll. You can often use the body tag itself for this trick, but it is less flexible and not recommended.
The idea here is to create a very long footer div, and have it be contained by the element which contains the rest of your content. Since the overflow of the parent is hidden, the actual length of the div will be ignored.
This is often shown with a counter-balancing bottom padding, but in your case that shouldn't be needed.
<style>
html,body,.bigDiv{height:100%}
.header{height:150px}
.footer{height:2000px; background-color:green;}
</style>
<div class="bigDiv" style="overflow:hidden;">
<div class="header"></div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>