I'm trying to make a construction as you can see below.
2.Div should be stretched from header to bottom of the window.
By the way I'm using a layout which includes "Header" and "Footer" so "Header" and "Footer" come from layout. When the page was opened, just 1.div and 2.div should be visible like that then scrolling it should follow other divs.
Because you have a header that has a relative height, you could do this trick with JQuery;
Set the height of the .body element, by subtracting the .header height from the <body> tag height.
$('.bodycontent').height(
$('body').height() - $('.header').height()
);
html, body {
height:100%;
}
.header {
background-color:red;
}
.bodycontent {
background-color:blue;
}
.third {
height:30%;
background-color:pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
header
</div>
<div class="bodycontent">
</div>
<div class="third">
</div>
Related
I am trying to set a fixed div div(menu) directly under another fixed div (header) and the positioning should also work with different screen sizes.
I call the "menu" div through JQuery with toggle and it appears under the "header" div. I can do this setting a fixed top value greater than the height of the "header" div but if I do not want the header to have a fixed PX value how do I do this?
Any suggestions?
html:
<div id="header">
<div id="menu">
</div>
</div>
css:
#header{
position:fixed
height:15%;
width:100%;
background-color:blue;
}
#dropdown{
display:none;
position:fixed;
top:?
}
Have a wrapper that is fixed, and just have the other 2 divs flow traditionally.
#header-container {
position:fixed
height:15%;
width:100%;
background-color:blue;
}
#header, #dropdown {
width:100%;
}
<div id="header-container">
<div id="header">
</div>
<div id="dropdown">
</div>
</div>
I'm trying to place two divs one above the other. The top div should stay always visible (not scrolling). The div below contains a list, and if the list is too long, and overflows the window/containing div, the div should be scrollable. When defining the height of the top div, it's good, but the content of the top div may change, so the height should not be fixed (like in this question).
My attempt on Plunker.
Is it possible with pure CSS, without JavaScript calculation?
Edit:
The list should strech to the bottom of the screen/container div.
You need to use some not too obvious CSS trickery to get the behaviour you're after, importantly any scrollable content needs to be within a separate container in a CSS table's cell, with overflow-y set, and a height of 100%. The top cell then needs a height of 1% to auto expand as appropriate.
Then all you need to do is set the tables height and max-height as appropriate.
By using CSS tables, you get a lot more flexibility when it comes to layout calculation/manipulation in terms of relating the sizes of elements
Demo Fiddle
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
.table {
display:table;
table-layout:fixed;
height:100%;
width:100%;
max-height:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
}
.row:first-of-type >.cell {
background:lightgreen;
height:1%;
}
.row:last-of-type >.cell {
background:pink;
}
#list {
height:100%;
overflow-y:auto;
}
HTML
<div class='table'>
<div class='row'>
<div class='cell'>This is text in the <strong>list-head</strong>, it's content may change, so the height of the div shouldn't be fixed, but should stay always visible (not scrolling).</div>
</div>
<div class='row'>
<div class='cell'>
<div id="list">
<div class="list-element">These are list elements.</div>
<div class="list-element">If the list is too long</div>
<div class="list-element">and reaches the bottom</div>
<div class="list-element">the list should be scrollable.</div>
<div class="list-element">(And only the list</div>
<div class="list-element">not together with the <strong>list-head</strong>.)</div>
</div>
</div>
</div>
</div>
Will this work for you ?
<div id="top" >
</div>
<div id="bottom">
</div>
<style>
#top{
display:block;
width:100%;
}
#bottom{
overflow:scroll;
display:block;
height:500px;
width:100%;
}
</style>
use this structure
<div class="main">
<div class="header">
</div>
<div class="content">
</div>
</div>
.main{
height:100%;
}
.header{
height:50px;
position:fixed;
top:0;
background:#454546;
width:100%;
}
.content{
margin-top:53px;
background:#ffffff;
}
Demo
I have a web page that is divided into header, page and footer.
The problem is that I made the page height :auto;.
But it does not work and I need the page to automatically grow up.
This is what I have in the CSS:
/* Page */
#page-wrapper {
overflow: auto;
height: auto;
text-align: center;
}
#page {
overflow: auto;
width: 1120px;
margin: 0px auto;
padding: 50px 40px;
color: #8F8F8F;
min-height:700px;
height:auto;
}
And HTML:
<body>
<div id="banner">
<div class="img-border">
<div id="header-wrapper">
<div id="header">
<div id="logo">
</div>
</div>
</div>
</div>
</div>
<div id="wrapper">
<div id="page-wrapper">
<div id="page">
<div id="wide-content">
</div>
</div>
</div>
</div>
It is very unclear what it is that you want.
In your first line you say you want a footer, but your HTML and CSS don't show any footers.
If you want a footer which sticks to the bottom of the page, have a look at the CSS Sticky Footer.
You shouldn't need the height in there at all... a div will grow or shrink with the amount of content inside of it. Try removing height: auto; completely.
If though you mean that you want to make the content section 100% of the page height even when there isn't enough content, this should help Make div 100% height of browser window
Do you mean you want the footer of your page at the bottom and the div imbetween to take up the remaining space (it's a little difficult to determine from your wording)?
If this is you what you want, I'd suggest looking at this blog post:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
HTML summary:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS summary:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
I have a single page website that is using multiple divs inside a container div. The height of each of these is set to a min-height of 100%. This works fine until content inside one of the divs is larger than the browser resolution - the content overlaps the border divs. I've tried to add position:relative to the container, and position:absolute to the children, but this causes all but the bottom div to disappear.
I've put the following together to demonstrate what I'm talking about:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<!-- Content -->
<div id="content">
<h1>content</h1>
</div>
<!-- About -->
<div id="about">
<h1>about</h1>
<!-- Contact -->
<div id="contact">
</div>
</div>
</body>
</html>
CSS
html, body{height:100%;min-height:100%;min-width:60.000em;font-size:30px;}
#container{
width:100%;
min-height:100%;
margin:auto;
padding:auto;
height:100%;
position:relative;
}
#content, #about, #contact {
position: absolute;
}
#content{
min-height: 100%;
height:100%;
background-color:red;
}
#about{
min-height: 100%;
background-color:blue;
}
#contact {
min-height: 100%;
background-color:yellow;
}
Here it is in action: http://jsfiddle.net/s62nr/1/
If I remove the relative/absolute positioning, the size is fine, but the content overlaps: http://jsfiddle.net/s62nr/2/
What am I missing?
Found the issue (seems this always happen when I ask a question ^^).
The problem was with the fact I was setting the child div height to 100%. This needs to be removed:
From:
#content{
min-height: 100%;
height:100%;
background-color:red;
}
To:
#content{
min-height: 100%;
background-color:red;
}
I was forcing the content to take up 100% of the browser height. This stopped the div from expanding automatically like it should.
If got a very basic layout, with a header, content container and a footer.
What i need done, is to make my content container size up, so that the whole layout will fit on the screen. (unless the text in the content container extends this of course).
I've tried assigning a height 100% value to my body, and from there assigning my content containers height to 100% aswell, but that results in making my content container size up to the height of the full screen.
Before that i had the height on the content container set to auto, which of course resulted in the page not being long enough, if a visitor with a bigger screen size than the layout, viewed the page.
Here is a part of my code:
HTML:
<body>
<div class="background"></div>
<div class="page">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
.page {
position:relative;
height:100%;
z-index:1;
}
.content {
position:relative;
width:850px;
height: 100%;
margin: 0 auto;
background: url(images/content.png) 0 0 repeat-y;
}
I think this what you need (the footer will be always sticked to the bottom)
CSS
html, body {
margin:0;
padding:0;
height:100%;
}
.page {
min-height:100%;
position:relative;
}
.header {
background:#00ff0f;
padding:30px;
}
.content{
padding:10px;
padding-bottom:45px; /* Height+padding(top and botton) of the footer */
text-align:justify;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height:15px; /* Height of the footer */
background:#00ff0f;
padding:10px 0; /*paddingtop+bottom 20*/
}
.content {
height:100%; // IE HACK
}
HTML
<div class="page">
<div class="header">Header</div>
<div class="content">
Some Content Here...
</div>
<div class="footer">Footer</div>
</div>
Tested in all major browsers.
DEMO.
What you really want is a sticky footer, no? You can style the other elements to give the illusion that the #content element is bigger than it really is.
http://ryanfait.com/sticky-footer/