Let's say you have a page which you don't want to scroll, constisting of three parts; a header, a main part and a footer:
<body>
<div id="page-content">
<header>My Header</header>
<main>Main Content</main>
<div class="footer-pusher"></div>
</div>
<footer>My Header</footer>
</body>
The page shall always be 100% high, the header and the footer have a fix height and 100% width, and the middle part shall stretch to fill the rest of the page, having a min-width in case of simply to small screens in terms of height. Only in that case, the page shall be scrollable. To achieve this, I used the following CSS, including the one to have a sticky footer:
body, #page-content {
height: 100%;
display: flex;
flex-direction: column;
}
.footer-pusher {
height: 200px;
margin-bottom: -200px;
}
footer {
height: 200px;
}
header {
height: 125px;
}
main {
flex-grow: 1;
min-height: 210px;
}
My question now is, how can I code via CSS that the main part expands to the remaining height of the page, and is at least 210px high? For illustrative purposes, I wrote the flex-grow property, as that's precisely the one I need, but in vertical and not in horizontal direction of the flexbox container. With the code above, the middle part is always 210px high..
Related
I have a footer tag (after a body tag inside main tag):
footer {
text-align: center;
position: fixed;
width: 100%;
background-color: #d9efef;
height: auto;
bottom: 0;
}
<body>
<main>
short html content
</main>
</body>
<footer>
<p>
Some Text (large amount)
</p>
</footer>
On a desktop it's relatively nicely styled (even though it's fixed and not after content).
On mobile though, it becomes very tall and is annoying to constantly have on the bottom of the screen.
How can I make the footer stay below the content at all times, but also stay at the bottom of the screen when the page content is short?
(The stackoverflow.com footer is kind of what I'm thinking about)
You can use display: flex for this.
For the following markup
<body>
<main>main content here</main>
<footer>footer here</footer>
</body>
The CSS would be:
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
main {
flex: 1 0;
}
footer {
flex: 0 0;
}
What it does is make the body at least span the entire height and it's children layout following the 'flex' system. With a flexbox you can then specify for each child how it should behave.
The flex: 1 0; in the main will tell the browser to have main take as much place as possible and grow to do so. While flex: 0 0; in the footer tells the browser to not grow the footer.
I want my vuetify application content (not the navigation or toolbar) to be scrollable horizontally and vertically to reveal a large grid (much like an iframe or frameset would):
https://cawoodm.github.io/powowshell/ide/
The main grid is rather large (9x9 200px squares + padding) and the requirements are:
The content area (yellow) should use all the remaining width and height of the screen (max-height: 100% not working like I think it should)
The user should be able to scroll that (yellow) content area (see pink scrollbars) to reveal the entire grid
The problem is I only get a vertical scrollbar along the entire height of my window (which I don't want) and, when I scroll that to the bottom I get my horizontal scrollbar (albeit grayed out).
I've hacked together a codepen which kind of shows the problem but ultimately I'd like the corrections required to the URL demo linked above.
HTML
<v-content >
<v-layout fill-height fill-width>
<div id="scroll">
<div id="grid">81 200x200px blocks go here...
</div>
</div>
</v-layout>
</v-content>
CSS
#scroll {
max-width: 100%;
width: 100%;
max-height: 100%;
height: 100%;
overflow: scroll;
background-color: yellow;
padding: 10px;
}
#grid {
width: 2000px;
height: 2000px;
background-color: grey;
}
I need to create a web layout with a header and a main area. The header's height will grow with its content and the main area will fill the remaining vertical space. Cool, this is easily done either with flex or grid. BUT! Inside the main area I need another element (let's call him badboy) which can have a lot of content and I need it to scroll, not to stretch my main area beyond the lower border of my page.
For the main area I have tried flex with flex-grow: 1 or grid row with size auto. But since such elements do not have a specific height, the badboy always stretches the main element so no overflow happens anywhere.
My HTML:
<div class="app">
<header></header>
<main>
<div class="badboy"></div>
</main>
</div>
The Layout:
If only I could fix the height of the header to a specific height, I could use calc to set the main area's height exactly and problem solved. But my header needs to grow with content. There already is a similar question here saying its impossible, but it is 5 years old and CSS has come long way since then.
Ok, so by digging around some more I have come up with this solution with CSS grid. I don't know if this is hacky or just regular stuff, but it seems to work.
.app {
width: 100vw;
height: 100vh;
grid-template-columns: 100%;
grid-template-rows: fit-content(1px) minmax(1px, auto);
display: grid;
}
header {
background: lightgray;
}
main {
background: gray;
}
.badboy {
max-width: 40rem;
margin: 0 auto;
max-height: 100%;
overflow-y: auto;
background-color: white;
}
I'm trying to get a simple solution for this layout.
This is the simplified html.
<div class='wrapper'>
<div class='header'></div>
<div class='middle'> TEXT </div>
<div class='footer'></div>
</div>
Header and footer have a fixed height in pixels.
middle can have a variable height, depending on the content.
I want wrapper to have a minimum height of 100%. So if the text inside middle is small, the middle div should expand to fill the browser page. And if it's too long, the whole page should be scrollable.
Is this possible easily? Maybe changing something in the layout?
here's your solution: http://jsfiddle.net/S4akv/1/
You do NOT want to set a hard height for the .middle. If your content is only a few lines then you will end up with scrollbars where none are needed.
With a header and footer, you also don't want height: 100% on your .middle class because it will push your footer down, forcing a scrollbar no matter what. You also don't want a clear-cut height:100% because most browsers will interpret this as 100% of the browser height, so when you resize your browser to be larger, either the height won't change or the footer won't move.
The best solution here is to have your wrapper and any associating backgrounds attached to that. Depending on the content within your .middle div this answer could change, but given the simple parameters this is the most elegant way to do it.
the secret is to make sure that all containing elements have a height set. reason being, any block element with height: 100% will only be 100% of the area containing it. in this case you need to set height for middle, wrapper and body, html
body,html { height: 100%; margin:0; padding:0; }
.wrapper { min-height: 100%; width: 100%; background-color: red; position:relative; padding-bottom: 200px; }
.header { height: 200px; width: 100%; background-color: blue; }
.middle { }
.footer { height: 200px; width: 100%; background-color: green; position:absolute; bottom: 0; }
If you have nested content within .middle that also needs to be 100% height there is a better way, using a combination of height, absolute positioning and negative margins. There are a million ways to skin a cat. Well, a handful at least :)
edited to add padding to .wrapper to make room for footer. The bottom padding of wrapper must be the same height as the footer
Given a 2 pane 100% height based faux column layout, I am trying to have a sticky footer in the right column that does not float over the column's content if the browser viewport is too small to display all the content.
My current problem is that the footer will float over the content if the browser viewport is to small.
This is what I am after:
With the code below though the footer (3) will move over the content (2).
Explanation:
Sidebar - this will have to extend to 100% height of the browser viewport or the combined height of 2+3 (whichever is greater)
Content - Varying amounts of content.
Footer - fixed height footer. This is either at the bottom of the browser window or below the content from no.2 whichever is greater.
Current html:
<div id="wrapper">
<div id="sidebar"></div>
<div id="content">
<div id="footer"></footer>
</div>
</div>
Current css:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
margin: 0 auto;
width: 1000px;
height: 100%;
}
#sidebar {
width: 400px;
height: 100%;
float: left;
}
#content {
width: 600px;
float: left;
}
#footer {
position: absolute;
bottom: 0;
height:200px;
}
Any help or pointers to get the footer to stay below the content no matter what would be much appreciated.
You need something like this? http://jsfiddle.net/L6BLa/3/
I think this is the concept you're looking for: http://www.cssstickyfooter.com/
Applied the CSS/HTML on the site above to the Fiddle made by Nick: http://jsfiddle.net/L6BLa/2/
Note that you need to move #footer to the outside of #wrapper.
Caveat: #sidebar will only extend as far as the height of its own contents, not the combined height of #content + #footer. You can make #sidebar appear to extend the full length by giving #wrapper the sidebar background and making #sidebar's background transparent.