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.
Related
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.
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 div that is fixed to the top of the screen. In the div there is a search area where you make ajax calls and fetch data into the div, and that changes the div height.
Also there is another div called "ThingsToAlign". I want to align this to the bottom of the fixed-top div.
Any one knows how to do this? I tried vertical-align or float: top but none of them are working.. Thanks.
<div className="container-fluid">
<div className="navbar-fixed-top">
<SearchArea />
</div>
<div>
<ThingsToAlign/>
</div>
</div>
In bootstrap the class navbar-fixed-top has the following properties.
.navbar-fixed-top {
position: fixed;
top: 0;
}
p.s: I was coding in react.js so that's why you see "className" instead of "class"
First, your HTML attribute className is incorrect (in standard HTML). It should be class.
Second, you should try to stay away from using angle brackets to surround demo text. The browser will consider it a tag and ignore it (i.e., it will be invisible when rendered).
Your question is not entirely clear to me, but from what I understand this demo may be helpful: http://jsfiddle.net/kdbsm3hz/
Otherwise, you may find a solution in other similar questions:
How do I use CSS to position a fixed variable height header and a scrollable content box?
Position DIV below fixed div with variable height
Placing a scrollable div below a fixed div of variable height
Scrollable div beneath a variable height header
Creating a variable height "fixed" header in CSS with scrollable content
I need a sidebar and a content area. I want to have equal height for both sections. So if I want to specify a background color for the sidebar, it will follow the content area even if the sidebar's contents are not as tall as the content section and vice versa. I want to make this in pure HTML and CSS only, so no javascript tricks.
This excellent article on A List Apart builds such a layout from scratch, and also contains some interesting links to other articles on the subject, such as Faux Columns (also on ALA).
The only real way of doing this in a cross browser fashion is with tables.
As content is added to the sidebar cell below, it will force the entire row to expand which in turn will force the contentArea cell to expand as well. You can style those individually with css.
<style>
#sideBar { vertical-align:top;}
#contentArea { vertical-align:top;}
</style>
<table>
<tr>
<td id="sideBar">SideBar</td>
<td id="contentArea">content area</td>
</tr>
</table>
Basically just set the height of the sidebar to be 100% and it will follow the parent element's height. In the example below its the container element. No matter it's height, sidebar's height will be 100% and therefore always be same height as container.
<div id="wrapper">
<div id="container">
<div id="sidebar"></div>
</div>
</div>
<style>
#wrapper {}
#container {min-height:500px;} (or whatever you want for the height)
#sidebar {height:100%;}
</style>
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>