i want do fixed page height without scrolling, header fixed on top, and fill center to the remainder of the page. Center area will be have own scrolling bar when content overflow.
I set height 100% for central div, but this height ≠ height free space between top and bottom blocks.
What can i do? Many thanks!
Look code on jsfiddle
I have made a js fiddle which i have created with the points that i have understood from your problem.
I am using jquery $( window ).height() for getting browser viewport height.
By subtracting the height of header and footer (50px + 50px =100px) from browser viewport height i will get the height of extra space.
This height will be equal to the content height.
check the fiddle
http://jsfiddle.net/bnx4uuse/1/
html,body {height:100%; }
* { padding: 0; margin: 0; }
body { border:1px solid blue; }
#head {background-color:#FC6; height:50px;position:fixed;top:0px;width:100%;}
#center {background-color:#3CC; height:100%;margin:49px 0px; }
#foot {background-color:#9C0; height:50px;position:fixed;bottom:0px;width:100%;}
fiddle: http://jsfiddle.net/9xrz9mbf/4/
Add a wrapper div around your center div.
Set it to full screen and pad:
height: 100%;
width: 100%;
padding-top: 150px; /* size of your header */
padding-bottom: 100px; /* size of your footer */
On your center div you set overflow:
overflow: auto
The overflow property hides the extra content and adds a scrollbar to your div.
You header will have:
height: 150px; /* your desired size */
position: fixed; /* or absolute */
top: 0px;
Your footer will have:
height: 100px; /* your desired size */
position: fixed; /* or absolute */
bottom: 0px;
Then you have a "full-screen" app (full-window in that case)
Related
I would like to create a layout for a webpage with the following conditions :
A header div that sticks to the top of the browser of a defined height.
A footer div that sticks to the bottom of the browser of a defined height.
A main div that fills all the space between the header and the footer.
The 3 parts shall not overlap when the height of the browser is reduced to lesser than the height of the footer and the header and the content of the main div.
If the height of the browser is reduced to lesser than that, scrollbars should appear for the whole document, not just for the main content.
In other words and with numerical values :
Let's assume the header and the footer are 100 px each and the browser height which is of course variable is 800 px; I want the main div which, lets suppose, has a content that takes only 200px to occupy the whole remaining 600px.
When the browser is reduced to a height lesser than 100px (header) + 100px (footer) + 200px (content of main div) = 400px; I don't want the three parts to overlap and I wand scrollbars to appear for the whole document not just the main content.
Is this achievable with only HTML and CSS and without using flexboxes nor javascript ?
Here is the sample code (snippet) :
* {
margin: 0;
padding: 0;
}
body{
}
#container {
min-height:100vh;
position:relative;
}
#header {
background-color : red;
height : 100px;
width:100%;
}
#main {
background-color : blue;
width:100%;
}
#footer {
position:absolute;
bottom:0;
background-color : yellow;
height : 100px;
width:100%;
}
<div id="container">
<div id="header">I'm a header that gets overlapped by the footer when the browser height is reduced</div>
<div id="main">I'm a main who refuses to stretch and fill the remaining white space and which is overlapped by the footer when the browser height is reduced</div>
<div id="footer">I'm a footer and I overlap all the other divs when the height of the browser is reduced</div>
</div>
You should be able to achieve this with a combination of overflow for the parent and using calc() for the height of main. Try the snippet below and play around with the height of the container. I would suggest to also give a min-height to main, so that it doesn't collapse entirely, but that depends on your needs.
In general, however, I think flex is the cleaner solution, see the other answer(s).
#container {
overflow: auto; /* Show scrollbars if content larger than #container */
height: 320px;
}
header {
width: 100%;
height: 100px; /* Absolute height */
background-color: red;
}
main {
width: 100%;
height: calc(100% - 200px); /* Dynamically calculated height */
overflow: hidden;
background-color: blue;
}
footer {
width: 100%;
height: 100px; /* Absolute height */
background-color: yellow
}
<div id="container">
<header>I'm a header that gets overlapped by the footer when the browser height is reduced</header>
<main>I'm a main who refuses to stretch and fill the remaining white space and which is overlapped by the footer when the browser height is reduced</main>
<footer>I'm a footer and I overlap all the other divs when the height of the browser is reduced</footer>
</div>
Also note that HTML5 gives you the actual elements header, main and footer, so you should use these in favor of divs.
I have 2 divs, a sidebar and the main pane.
.main {
position: absolute;
min-width: 400px;
top: 0;
bottom: 0;
left: 200px;
right: 0;
overflow: auto;
}
.leftSidebar {
position:absolute;
top:0;
bottom:0;
left:0;
width: 200px;
padding-left: 10px;
overflow-x: auto;
overflow-y: scroll;
}
I want the main div to have a horizontal scrollbar when the size is less than 400px, but currently content just gets cuts it off when it is less. What am I missing?
If this helps, here is a demo of this. Changing the width of the window should ideally add a scrollbar to the main div, but it only puts the scrollbar on the entire window.
Solution: http://jsfiddle.net/nnt7ctjr/
By giving the .main a min-width you forced it to stay at those dimensions and overflow outside of the viewport, thus a scroll bar appeared for the entire screen.
So the solution is to mimic this effect within the .main. I created another object span.content and gave it the min-width:400px;. Now the text will retain the 400px dimension while the .main div continues shrinking.
This question already has answers here:
Force sidebar height 100% using CSS (with a sticky bottom image)?
(17 answers)
Closed 8 years ago.
I have a issue with the left sidebar.
I would like to make the left sidebar 100% height of the browser always no matter what content is there in right hand panel.
<div class="container">
<div class="leftwrapper">Some text</div>
<div class="rightwrapper">Some text for right</div>
</div>
Fiddle -- http://jsfiddle.net/squidraj/32uppbhy/
Percentage heights are relative, you want the containing element .container to stretch the full height of the viewport, so it needs a height of 100%, but 100% of what? So you also need to set it on your html and body elements. Then simply give your absolutely positioned sidebar bottom:0; to stretch it the full height.
Simply change your CSS thus:
html, body { /* ensure the available document space is the full height of the viewport */
height:100%;
padding:0;
margin:0;
}
.container {
overflow: hidden;
position: relative;
height:100%; /* <-- make the containing element full height */
}
.leftwrapper {
background-color: #0b7582;
bottom: 0;
float: left;
position: absolute;
text-align: center;
top: 0;
width: 8%;
bottom:0; /* <-- anchor the element to both the top and the bottom of the viewport */
}
.rightwrapper {
float: left;
margin-left: 8%;
width: 92%;
}
Add the following rule to the top of your CSS:
html, body, .container, .leftwrapper {height:100%;}
Few elements derive their height from body and html tags as their parent. What you can do is simply create a new css rule for body and html tag with a height property of 100% and then another rule for your sidebar height to be 100%. Hope it works :)
CSS rules:
html,body{height:100%;}
.sidebar{height:100%;}
I am using the sticky footer method for Bootstrap 3.0 as described in their example. I have it working fine and that is not what I am struggling with.
It calls for the wrapper to have the following:
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 -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
Now I am trying to have some 100% height containers inside that and I can't because there is a height of auto on the parent. Is there a way to get around this and keep my sticky footer? I want to put 100% height containers that stretch so I can put backgrounds in them.
Thanks
I'm not quite sure if this solution fits your needs, but it involves absolute positioning a div behind the sidebar and making it stretch the height of #wrap by setting top and bottom to 0. It essentially inherits the height while avoiding explicitly declaring a height property. The only potential problem would be if you have other elements that are above the sidebar (i.e. headers) since the div will also be stretch behind those as well.
http://jsfiddle.net/qaB8D/
#wrap {
position: relative;
}
aside, #words {
/* This is just so the sidebar stays left, and the text stays right */
display: table-cell;
}
aside {
width: 100px;
}
aside:before {
content: '';
position: absolute;
background-color: red;
top:0;
bottom: 0;
width: inherit;
z-index: -10;
}
/* include Sticky Footer code/*
I am trying to create a bottom aligned, fluid width sticky footer that contains three links that are the same height as the container, which also have fluid widths.
I have created a top aligned version of this footer, where the links are not the full height of their container. It breaks if I set the bottom of the container to zero. I have put the code for this here:
http://jsfiddle.net/bHJR3/1/
How can I modify what I have so the bottom edge of the container is flush with the bottom of the window, and the links are the same height as the container?
I know how to do this through jquery but I am trying to avoid js if at all possible.
Thanks for any help.
EDIT:
Here's a jquery solution I came up with in case of no answers if anybody wants to see it. http://jsfiddle.net/bHJR3/2/
The reason it broke when you set bottom: 0 on #footer is because everything inside #footer had position: absolute. Absolutely positioned elements do not take up any space in the document flow and will not cause their parent elements to expand to contain them. Setting a height on #footer solves this. Setting height: 100% on the a tags will cause them to size relative to their parent element. You can keep div.content, but you would also have to set height: 100% on it.
Add the following CSS to #footer:
bottom: 0;
height: 90px;
Add the following CSS to A:
height: 100%;
line-height: 90px; /* matches the height from #footer to vertically center the link text */
Remove div.content. It doesn't seem necessary here.
Edit
You can center the footer by adding/changing the following CSS on #footer:
width: 640px;
left: 50%; /* positions left edge of #footer to center of page */
margin-left: -320px; /* pulls footer to the left (width / 2) * -1 */
Edit
You can use max-width and a media query to alter the styling of the footer if the window width is < 640px:
#footer {
position: fixed;
width: 100%;
max-width: 640px;
height: 114px;
bottom:0;
left: 50%;
margin-left: -320px;
}
#media only screen and (max-width: 640px) {
#footer {
margin-left: auto;
left: 0;
}
}