I am currently working on a website where sometimes (for instance when the loading square comes up - like image below) the main content div is too small to fill the entire page with the footer/header.
I would like the main content that is in between the header and footer to stretch when the content div is too small, so that it fills the entire screen, while keeping the footer and header in view.
I have tried many different ways to do this, but all to no avail so far. The image below illustrates my problem.
The HTML layout looks like this:
<body>
<div class="nav-container"></div>
<div class="main-container"></div>
<footer></footer>
</body>
If you are familiar with flexbox, this would do the trick:
<body>
<header></header>
<div class="main-container"> Main content </div>
<footer></footer>
</body>
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header, footer {
flex: none;
}
.main-container {
flex: auto;
}
Related
I'm working on a web-app where the layout is the next :
A left-side navigation menu
A right-side body for content
My problem is that even though both sides height: 100% when content is added to the right-side, the left one doesn't expand !
I illustrated my scenario with this photo to explain more what's happening.
[UPDATE]
Here is the code snippet that I'm using for building this layout.
PS : it's an Angular app so I'm using <router-outlet> where I display the content's components:
app.component.html
<div class="dp-flex-display dp-flex-row dp-full-width-height">
<aside>
<dev-portal-side-navigation></dev-portal-side-navigation>
</aside>
<aside class="dp-full-width">
<router-outlet></router-outlet>
</aside>
</div>
app.component.scss
.dp-flex-display {
display: flex;
}
.dp-flex-row {
flex-direction: row;
}
.dp-full-width-height {
min-width: 100%!important;
min-height: 100%!important;
}
.dp-full-width {
width: 100%;
}
I have a page with a section of tabs in which each one of these tabs has more or less content and when I open a tab with a lot of content and then I go to a tab with less content the page keeps allowing scroll (even it the page is empty), I've just found answers about when the content grows up but nothing about when it shrinks out.
What I want to achieve is to be able to scroll when there is a lot of content on the screen and use just the view height when there is little content on the screen.
This is the basic scheme of the page
HTML:
<body>
<div class="wrapper>
<div class="content">
</div>
<footer>
</footer>
</body>
css:
body {
margin: 0;
padding: 0;
height:100%
}
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
.footer{
position:relative;
bottom:0;
}
This is how it looks when I open a lot of content and then a little:
add max-width: 100vw; to your overflowing element replace 100vw with ur value
I want to fix my footer at the bottom gap. I think content is less then this problem repeated and content full problem solved but I want to content less does not shows gap I'm using same footer remaining pages so help me any one.
If content is less, why not simply fix it at the bottom. I mean its the dirtiest hack possible.
If you want something clean, look into sticky footer.
$(function(){
function adjust(){
var winH = $(window).height(),
docH = $('document').height();
if(docH > winH){
//leave it
}else{
$('.footer').addClass('fix-footer');
}
}
$(window).on('resize',adjust);
})
.fix-footer{position:fixed; bottom:0; left:0; width:100%;}
The simplest way to do this is by using Flexbox. The flex property specifies how much the item will grow to fill up the remaining space.
The container needs to be set to display: flex, and we set min-height: 100vh for the body so that it fills up at least 100% of the viewport height.
CSS
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}
HTML
<body>
<main>Main content goes here</main>
<footer>Footer goes here</footer>
</body>
Use .main class as a container put all your body data in main container
<html>
<head>
<style>
body {
margin:0;
display: flex;
height: 100vh;
flex-direction: column;
display:-ms-flexbox;
}
.main {
flex: 1;
}
</style>
</head>
<body>
<div class="main">Put you form here</div>
<div class="footer">Footer goes here</div>
</body>
</html>
<div class="footer"></div>
css
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
}
Position-absolute:
This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location.
Position-fixed:
A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled,
Here's an example that goes halfway there:
http://jsfiddle.net/gt9vz4qk/1/
CSS: #content {background-color: #fdd; overflow: auto; height: 70vh;}
HTML:
<button>Hello</button>
<div id="content">
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
</div>
<input>
Using relative size units like vh helps, but I feel like I'm missing something really basic. As you can see, if you resize the window or even the splitter on the jsfiddle website far down, the other elements start compressing and a second scrollbar pops up. The only scrollbar should be the overflow one.
Another way to think about this is that I want the top elements to take up as much space as they need, the bottom elements to take as much space as they need, and anything else should be taken up by the central element.
Here's a flexbox solution:
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
#content {
background-color: #fdd;
overflow: auto;
flex: 1;
}
<div>
<button>Hello</button>
</div>
<div id="content">
A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
</div>
<div>
<input>
</div>
Fiddle
I creating an new layout for a personal website.
I'm using Twitter Bootstrap 3, and my initial layout was made using as exemple
the "Bootstrap with sticky footer" sample (http://getbootstrap.com/examples/sticky-footer-navbar/)
This is my html:
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page navigation -->
<nav id="nav-container" class="navbar navbar-default container" role="navigation">
<div class="container">
<!-- Here I put a very normal Bootstrap 3 navbar -->
</div>
</nav>
<!-- Begin page content -->
<div id="main-container" class="container">
<!-- All my content goes here! -->
</div>
</div>
<!-- Begin page footer -->
<footer id="footer" class="container">
<div class="container">
</div>
</footer>
</body>
The Sticky Footer CSS:
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -100px;
/* Pad bottom by footer height */
padding: 0 0 100px;
}
/* Set the fixed height of the footer here */
#footer {
height: 100px;
}
And the custom style for my layout:
body {
/* Body's background will be grey */
background-color: #C0C0C0;
}
#main-container {
/* A box where I'll put the content will be white */
background-color: #FFFFFF;
}
#wrap {
height: 100%;
min-height: 100%;
}
#main-container {
min-height: 100%;
height: 100%;
}
This code generate this layout:
But, as you can see, the div #main-container don't grow 'till the end of the layout.
The div keep with the height of his content.
What I want is that this div always fills the entire page, like this:
Many solutions on internet said me to fix min-height to some tested value, but this way
I'll not be able to keep my website responsive (it's very important to me keep my layout
always responsive, that's the main reason I use Bootstrap 3).
Other solution goes to calculate the div height with javascript. Personally I don't like
this solution. I whish I could solve this only by using CSS.
Someone knows how to solve this problem?
As long as you are working on percentage, your site will be responsive. So using
min-height:100% does solve your problem which is just CSS. And if you don't want Javascript involved here, that is the way to go.
See the JS Fiddle DEMO. Your container is filling the entire page.
#main-container {
min-height: 100%;
background: #fff;
}
If you want to have sticky footer AND fullheight #main-container, you have to modify your structure. First, let me explain why you can't solve this with the sticky-footer method you're using right now:
Setting #main-container's height:100% or min-height:100% won't work because you can't use percentage height with a parent whose height is not strictly defined. Note that in the currently accepted answer this is considered a bug but it is not, it's just the way it is supposed to work. In your example #wrap's height is set to auto, so #main-container height just ignores the 100% and fallsback to auto.
To have both sticky footer and REAL fullheight #main-container (instead of faking with background) you have to use display:table and display:table-row. This works because when you use display:table, height:100% works just as your regular min-height:100% and the display:table-rows inside will always stretch to use all the vertical space available.
NOTE: this is different from using html tables, because in this case you don't need to bloat your markup with non-semantic tags, as you'll see in the following example.
Here's the example HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="maincontainer" class="astable">
<div id="header" class="astablerow">
header
</div>
<div id="middlecontainer" class="astablerow">
content
</div>
<div id="footer" class="astablerow">
footer
</div>
</div>
</body>
</html>
And here's the CSS
html, body{
margin:0;
padding:0;
height:100%;
}
.astable{
display:table;
height:100%;
table-layout:fixed;
width:100%;
}
.astablerow{
display: table-row;
}
#header{
height:30px;
background-color:#00ff00;
}
#footer{
height:30px;
background-color:#0000ff;
}
#middlecontainer{
background-color:#ff0000;
}
I think that min-height doesn't work due to a reported bug. See this: stackoverflow.com/questions/8468066.
An easy way to create the illusion that #main-container grows till the end, is to set #wrap's background-color the same value as #main-container's.