I have a common page structure with fixed header and a sticky footer. But I can't get around how to extend the div heights to fill the full window area.
HTML
<header>
header header header
</header>
<div id="page">
<div id="left">side bar side bar</div>
<div id="right">
<p>I want to draw the brown dashed line all the way down to the footer even when the #right content is too little to fill the window.</p>
<p>I know that I have to set height 100% on #right so that it stretches to fill the green box. But, the green box itself does not stretch to the bottom despite height 100% because the yellow box does not have explicit height defined.</p>
<p>What can I do?</p>
</div>
</div>
<footer>
footer footer footer
</footer>
CSS
html, body, foot, header, div { padding: 0; margin: 0; box-sizing: border-box; }
p { margin-top: 0 }
html { height: 100%; min-height: 100%; }
header { position: fixed; background-color: red; height: 50px; width: 100%; }
footer { position: absolute; bottom: 0; width: 100%; background-color: cyan; }
body {
position:relative; /* container for footer */
border: 5px solid yellow;
min-height: 100%; /* not explicitly setting height to allow footer to be pushed downwards */
}
#page {
padding: 60px 0 20px 0;
border: 5px solid green;
height: 100%; /* not working: how to extend page all the way to the bottom, min-height = fill the window? */
}
#page:after { content:""; display: block; clear:both; }
#left { float: left; width: 100px; }
#right {
margin-left: 100px;
padding-left: 10px;
/* objective: to create vertical divider between #right and #left that extends to the footer */
height: 100%;
border-left: 5px dashed brown;
}
OK, the reason why height 100% is not working its because body does not have a height at all, its height depends of the items inside body.
There is a work around for this
Apply the following to your styles.
html, html body {
height: 100%;
}
#page { /* If #page is a lvl 1 child of body, this should work */
height: 100%;
}
Here is the JSFiddle
http://jsfiddle.net/wetjyLy3/1/
You can use absolute positioning to make the divs always 0px away from the top and bottom of the window. You may need to play around with the values, but something like this should work:
#left { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; }
#right { position: absolute; top: 0; bottom: 0; right: 0; width: 80%; }
Edit: Here's a fiddle that shows how this could work.
Related
Background: On small screens when the keypad is up and the footer sits on its top then it covers the input fields in the content area.
Here are the requirements (some borrowed from [here][1]):
The footer should be visible if the content above it is shorter than the user’s viewport height.
If the content is taller than the user’s viewport height, then the footer should disappear from view and rest at the bottom of the page, as it would naturally.
This must be done without JavaScript
The header must be fixed at the top
The most important part is only the content can have a scroll-bar if necessary
It has to work on Android 4.x, IOS >=7.1 WebView, WP8.1 Web Browser element
This is how I make the content scrollable now while putting the footer to the bottom.
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#wrapper {
min-height: 100%;
position: fixed;
}
header {
height: 72px;
background-color: red;
}
#content {
overflow: auto;
border-bottom: 1px solid red;
margin-bottom: 50px;
}
footer {
height: 50px;
background-color: black;
position: absolute;
bottom: 0;
top:auto;
left:0px;
width:100%;
}
Update1
This is what I could come up with so far.
http://jsfiddle.net/gfqew5un/3/
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#wrapper {
min-height: 100%;
position: fixed;
}
header {
height: 72px;
background-color: red;
}
#content {
overflow: auto;
border-bottom: 1px solid red;
margin-bottom: 50px;
}
footer {
height: 50px;
background-color: black;
position: absolute;
bottom: 0;
top:auto;
left:0px;
width:100%;
}
It's close to my final goal but the problem with this solution comes up when the content is longer than the viewport. In that case the footer goes out of the screen but I want it to stay at the bottom while the content gets a scroll-bar and stretches till the top of the footer. So a hard coded max-height on content won't work. I need something more dynamic.
You should use position:relative to make sure the footers position is right under the content.
if you use max-height to your content div in combination with overflow: auto the scrollbar appears.
This is the CSS code:
header{
height: 72px;
background-color: red;
position: relative;
left: 0px;
right:0px;
overflow: visible;
}
#content{
overflow:auto;
position: relative;
max-height:200px;
}
footer{
height: 50px;
background-color: black;
position: relative;
}
Link to JSFiddle
You can easily achieve this effect using flex option from CSS3.
HTML:
<header>
<h1>Your header</h1>
</header>
<div id="content-wrapper">
<div id="content">
Lorem ipsum dolor
</div>
<footer>
footer content
</footer>
</div>
CSS:
html {
height: 100%
}
body {
display: flex;
flex-direction: column;
height: 100%;
}
#content-wrapper {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
}
#content {
flex: 1;
}
footer {
height: 35px;
padding-top: 20px;
}
https://jsfiddle.net/puybgmps/
I have read all the tutorials on how to make the footer at the bottom of the webpage but still i'm unable to do it for my site.
The links i have referred are
How do you get the footer to stay at the bottom of a Web page?
Making my footer stick to bottom of the page
Ways to stick footer to the bottom a page
making the footer stick the bottom
None of it worked..!
CSS
#footer1 {
clear: both;
background-color: #333;
width: 1200px;
min-width: 100%;
width: 100%;
bottom: 0;
position: relative;
height: 50px;
border-top:5px solid #1b9bff;
}
Here is the dummy fiddle of my site
Fiddle
This is the fiddle i have tried but there is a bug in it too
http://jsfiddle.net/andresilich/fVpp2/1/
Try this:
<div id="container">
<div id="content"></div>
</div>
<div id="footer">My Sticky Footer</div>
CSS:
html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content { padding-bottom: 3em; }
Add/Edit as following
#body {
margin-bottom: 85px;
position: relative;
}
#footer1 {
position: fixed;
}
I guess this is what you want
* html #form1 {
height:100%;
}
#form1 {
min-height: 100%;
position: relative;
}
#body {
padding-bottom: 50px; /* padding-bottom should be equal to the footer height (this keeps the footer from overlapping the content) */
}
#footer1 {
position: absolute;
width: 100%;
clear: both;
bottom: 0;
padding: 0;
margin: 0;
}
Following the code of this method - you need to to:
1) Place your footer outside the form
2) Add height: 100% on form
3) Set negative bottom margin to form according to the height of the footer.
form {
min-height: 100%;
height: 100%;
margin: 0 auto -150px; /*footer 150px high */
}
Modified Fiddle
I have one main div that should make the page scrollable. On either side of this div there is a sidebar. The only difference I want from how it is now, is that the sidebars should always stay on top (position: fixed;)
I've tried everything, but it doesn't work. If I put position: fixed; on the .fixed, the width is no longer 100 % but the width of the actual contents inside. If I put on width: 100% the width turns 100 % of the viewport.
Is this even possible with just CSS?
JSFiddle: http://jsfiddle.net/6yWNv/
Sidebar 1
<div id="wrapper">
<div class="contents">
<p>Lorem ipsum dolor sit amnet.</p>
</div>
</div>
<div class="sidebar">
<div class="contents">
<div class="fixed">
Sidebar 2
</div>
</div>
</div>
html, body {margin: 0; padding: 0;}
#wrapper {
width: 54%;
float: left;
background: #0FF;
}
.sidebar {
width: 23%;
float: left;
}
.sidebar .contents {
margin: auto;
background: #F00;
min-width: 100px;
width: 55%;
height: 100px;
}
.sidebar .contents .fixed {
background: #0F0;
}
The trick is to set position:fixed on the sidebar (with left:0 and right:0 respectively) and then add margin-left:23% to #wrapper:
#wrapper {
width: 54%;
margin-left: 23%;
background: #0FF;
}
.sidebar {
width: 23%;
position: fixed;
left:0; top: 0;
}
#wrapper + .sidebar { /* target second sidebar */
left: inherit; /* reset left */
right:0;
}
if you want the green sidebars to stay in place, but the red boxes to move away, then something like this should work:
.sidebar {
width: 23%;
float: left;
position: relative; /* so sub-containers are relative to sidebar */
}
.sidebar .contents {
margin: auto;
background: #F00;
min-width: 100px;
width: 100%; /* relative to sidebar */
height: 100px;
}
.sidebar .contents .fixed {
background: #0F0;
position: fixed; /* starts a new context... */
width: 23%; /* so this is not relative to sidebar *.
}
Not possible with just CSS. When you make an element fixed, it removes it from its "context" and makes its new "context" the document. That's why specifying width: 100% on the position: fixed element spans the page.
Edit: I'm assuming that you want the green sidebars to stay in place but the red boxes to move away as you scroll (I'm making this assumption because of the way you've named your classes on your page).
you need to fix the sidebar, not its contents.
Just remove the float and set the position fixed to top and right
.sidebar {
width: 30%;
position: fixed;
top:0;
right:0;
}
First off, similar but never answered questions:
vertically-scrolling-percentage-based-heights-vertical-margins-codepen-exampl
scroll-bar-on-div-with-overflowauto-and-percentage-height
I have an issue with scrolling a center part of the web page while its height needs to be auto.
Here is a fiddle
The header needs to be on top at all times, meaning I don't want the body to become larger than 100%.
However the div #messages can become larger, and that div needs to scroll on its own.
The #messages has a margin-bottom to leave room for the fixed bottom div.
I tried making the div #messages with box-sizing: border-box; and making it height:100% and padding to keep it in place but this was a really nasty looking solution and the scroll bar was the full page height instead of only the inner part.
Any help would be greatly appreciated.
You want something like This
Or maybe - his big brother..
Pure CSS solution, without fixing any height.
HTML:
<div class="Container">
<div class="First">
</div>
<div class="Second">
<div class="Content">
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.First
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Second
{
position: relative;
z-index: 1;
/*for demonstration only*/
background-color: #6ea364;
}
.Second:after
{
content: '';
clear: both;
display: block;
}
.Content
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
You could try the following.
You HTML is:
<div id="container">
<div id="header">The header...</div>
<div id="content">
<div id="messages">
<div class="message">example</div>
...
<div class="message">example</div>
</div>
<div id="input">
<div class="spacer">
<input type="text" />
</div>
</div>
</div>
</div>
Apply the following CSS:
html, body {
height: 100%;
}
body {
margin:0;
}
#header {
background:#333;
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 45px;
overflow-y: scroll;
}
#messages {
overflow: auto;
}
#messages .message {
height: 79px;
background: #999;
border-bottom: 1px solid #000;
}
#input {
position:fixed;
bottom:0;
left:0;
width:100%;
height: 45px;
}
#input .spacer {
padding: 5px;
}
#input input {
width: 100%;
height: 33px;
font-size: 20px;
line-height: 33px;
border: 1px solid #333;
text-indent: 5px;
color: #222;
margin: 0;
padding: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/5Y8gq/
First, set the height of 100% to the html and body tags, which allows you to reference the view port height.
You want the #header to be fixed towards the top of the page using position: fixed, similarly for your footer #input.
The key is to use absolute positioning on #content to stretch it between the bottom edge of the header and the top edge of the footer, and then apply overflow-y: scroll to allow it to scroll the content (list of messages).
Comment
The source code for the #input block may be placed outside of the #content block.
Ok so I've got a header and a footer with absolute positioning and heights of 144px. The content div in the middle area needs to be the full height of the area in between.
Simplified:
<style>
.marginals{
position: absolute;
height: 144px;
width: 100%;
left: 0;
}
#header{ top: 0px; }
#footer{ bottom: 0px; }
</style>
<div id="header" class="marginals"></div>
<div id="content"> Content </div>
<div id="footer" class="marginals"></div>
So basically I want a div that is 100% - 288px. At first I thought I could just make a 100% x 100% div with 144 padding on top and bottom and then stuff the content div in there at 100% but my thinking has gone stray somewhere.
Here's an example I made using 20% height for 'bread layers'. (Which I can't do on this project) Used 60% height for the scrolling 'meaty layer' and put it at top: 20%;
What you have won't work, tables and absolute positioning don't go well together, and height on table rows and cells is not handled consistently across browser anyway so I think you'd find it hard to get the top/bottom rows to stay a fixed height while still asking the middle row to scroll
however I think you were right with your original posting and using absolute positioning, you don't need percentages though, you can use the top and bottom co-ordinates tohether, so you can tell the middle div to start at 144px from top and finish 144px from bottom..
e.g.
HTML:
<div class="header">Some header content</div>
<div class="wrap">
Bulk content<br>bulk content<br>bulk content<br>bulk content<br>
Bulk content<br>bulk content<br>bulk content<br>bulk content
</div>
<div class="footer">Some footer content</div>
CSS:
html, body {margin: 0; padding: 0; height: 100%; overflow: hidden;}
.wrap {
position: absolute;
left: 0;
top: 144px; /* = height of header including any borders or padding */
bottom: 144px; /* = height of footer including any borders or padding */
width: 100%;
background: #fff;
overflow: auto;
}
.header, .footer {
position: absolute;
width: 100%;
left: 0;
height: 140px;
background: #f00;
}
.header {
top: 0;
border-bottom: 4px solid #000;
}
.footer {
bottom: 0;
border-top: 4px solid #000;
}
The whole thing is based on the html, body elements having the height of 100% set
Example: here
Looks like you're trying to create a 3 liquid row-layout. Why not try something like this:
Fiddle: http://jsfiddle.net/jCjsD/2/
HTML
<body>
<div id="body_container">
<div id="header">Some header content</div>
<div id="content"><!-- Bulk content here !--></div>
</div>
<div id="footer">Footer</div>
</body>
CSS
#header, #content, #footer {
float: left;
width: 100%;
}
#header {
border-bottom: 1px solid #888;
background: yellow;
}
#footer {
border-top: 1px solid #888;
background: yellow;
}
#content {
clear: both;
padding-bottom: 50px;
}
#footer {
position: relative;
margin-top: -50px;
height: 50px;
clear:both;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#body_container {
min-height: 100%;
}