I need to create a page where I would have a 100% wrapper between header and footer elements. The wrapper is a general content view where I will be adding templates. Apart of having the wrapper 100% height I need to have a first section in the wrapper also with 100% height.
The main problem is that I cannot position the footer relatively after the wrapper. It stays somewhere in the middle. See fiddle for example.
HTML
<header ui-view="header"></header> <!--Fixed Height/Relative-->
<div id="wrapper" ui-view="wrapper"> <!--100% Height/Relative-->
<section></section> <!--100% Height/Relative-->
<section></section> <!--Auto Height Based On Content/Relative-->
<section></section> <!--Auto Height Based On Content/Relative-->
</div>
<footer ui-view="footer"></footer> <!--Fixed Height/Relative-->
CSS
body{
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
html{
height: 100%;
}
div{
position: relative;
height: 100%;
width: 100%;
}
section:first-child{
height: 100%;
}
section{
position: relative;
display: block;
height: 400px;
width: 100px;
border: 1px solid black;
}
header{
position: relative;
height: 100px; width: 100%; background: red;
}
footer{
position: relative;
height: 100px; width: 100%; background: red;
}
JSFiddle
I believe the div you have around your sections is what's causing you some trouble. Check out the snippet below. If you place only your first section and the header in that div, you can accomplish what you want by putting height 100% on that div.
Note that without that div, your :first-child pseudo selector won't work because that section is no longer the first child of it's parent (header is). So I added an ID to it simply so I can reference it in the CSS.
So now the div is 100% of the height, header is a fixed height, and section1 is at 100% filling the remainder of the div.
body{
margin: 0;
padding: 0;
height: 100%;
background:green;
}
html{
height: 100%;
}
div{
height: 100%;
width: 100%;
background: pink;
}
section {
display: block;
height: auto;
width: 100%;
border: 1px solid black;
}
section#section1 {
height: 100% !important;
}
header{
height: 50px; width: 100%; background: red;
}
footer{
height: 50px; width: 100%; background: blue;
}
<div>
<header></header>
<section id='section1'>section1</section>
</div>
<section>section2</section>
<section>section3</section>
<footer></footer>
The height:100% you have set on the body is what's causing your footer element to be in the middle of the page. Remember that '100%' is '100% of your window height', so be careful with that. Cheers.
Basically I have this layout
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer">
<img src="" alt=""/>
</div>
</div>
And this CSS
#container {
height: 100%;
}
#header {
height: 8%;
}
#footer img {
width: 100%;
height: auto;
}
As you can see, the image in the footer has set width and relative height, which means the height of the footer will be whatever the height of the image will be depending on the screen width.
I need to stretch the content to the remaining height so the combined height of header, content and footer equals the height of the screen (no vertical scrolling).
I can easily do it with flexbox but I'm developing an app using Meteor.js and it will run in an environment, where flexbox might not be supported (older Android versions).
What you're looking for is known as "sticky footer".
WITHOUT FLEXBOX
This version is based on this answer
STANDARD DEMO
html, body {
height: 100%;
margin:0;
}
#container{
display: table;
height: 100%;
width: 100%;
background: yellow;
}
#content{
display: table-row;
/* height is dynamic, and will expand... */
height: 100%;
/* ...as content is added (won't scroll) */
background: turquoise;
}
#header {
height: 8%;
}
h1{
margin:0;
padding:0;
}
#footer img {
width: 100%;
height: auto;
}
#footer{
color:lightgrey;
display: table-row;
}
WITH FLEXBOX
This version is based on this article
FLEXBOX DEMO
html, body, #container {
height: 100%;
}
#container{
display: flex;
min-height: 100vh;
flex-direction: column;
}
#content{
flex: 1;
background:tomato;
}
#header {
height: 8%;
}
h1{
margin:0;
padding:0;
}
#footer img {
width: 100%;
height: auto;
}
#footer{
color:lightgrey;
}
You could use CSS tables to accomplish this. Make #container display:table and the sub-divs display:table-row. Then if header and footer have a height, the content height will adjust accordingly. In this case, the height of #header is explicitly 8% and the height of #footer is determined by the height of the image.
html, body, #container {
height: 100%;
padding: 0;
margin: 0;
}
#header, #content, #footer {
display: table-row;
}
#container {
display: table;
width: 100%;
}
#header {
height: 8%;
background-color: blue;
}
#content {
background-color: yellow;
}
#footer {
background-color: green;
}
#footer img {
width: 100%;
}
Here's an example on jsfiddle. Try adjusting the width and height of the result window.
I'm trying to figure out how to create a layout with:
- a fixed height header and not fixed
- two sidebars (one in each side)
- a column between the sidebars
- a fixed height footer sticky at the bottom of the page and that moves accordingly to the content (here is the problem, maybe)
I've seen many similar questions, but none of them seen to work with 3 columns.
I'm not sure, but I think it's something related to floating the columns of the content.
Here's the HTML code:
<div id="wrapper">
<div id="header">Header is ok</div>
<div id="container">
<div id="column-left"></div>
<div id="content"></div>
<div id="column-right"></div>
</div>
<div id="footer"></div>
Here's the CSS code:
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
height: 100%;
position:relative;
}
#header {
background: green;
height: 60px;
position: absolute;
width: 100%;
}
#container {
margin: 0 auto;
width: 80%;
padding-top: 60px; /* size of header */
padding-bottom: 100px; /* size of footer */
background: red;
height: 100%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height: 100px;
background: blue;
}
#column-left {
width: 20%;
min-height: 100%;
background: yellow;
float: left;
}
#column-right {
width: 20%;
min-height: 100%;
background: yellow;
float: left;
}
#content {
float: left;
width: 60%;
min-height: 100%;
background: pink;
}
Here's an example of what's happening when I add some content:
http://jsfiddle.net/Lzp67xyu/
See this fiddle
Change positioning of #footer to relative and add clear:both to #footer.
That is, the CSS for #footer would be like
#footer {
clear: both;
position:relative;
bottom:0;
width:100%;
height: 100px;
background: blue;
}
According to the docs
The clear property specifies on which sides of an element where
floating elements are not allowed to float.
Putting a margin-bottom on the container with your columns in it will keep the space below it where the footer would be.
.columnncontainer{
width:80%;
margin-bottom:50px;
background-color:yellow;
display:inline-block;
}
Here's a JSFiddle I came up with as example:
http://jsfiddle.net/y5xwop8h/1/
I'm having an issue using display: table and display: table-cell.
Fiddley: http://jsfiddle.net/5q51sbqb/1/
I have a div with a display:table; and within that two divs with display:table-cell;
The left div (.t1) is a fixed width and the right div(.t2) should take up the rest of the space to the edge of the container.
My issues lies with adding a long div (2000px) to the right div(.t2). I basically need the content-window to stay the same width as its parent without pushing out further than the confines of the container, as to allow the content within to be scrolled.
Keep in mind this needs to be without using a fixed width, as the container and t2 are both responsive. And I also have to use table and table-cell display properties :(
So basically the children of the .t2 div are flowing beyond the container when I need them to fit within the container width ( without setting a fixed width on the content-window ... and on the .t2 div)
I'm stumped.
HTML
</div>
</div>
<div class="table-cell t2">
<div id="content-window">
<div id="content"></div>
</div>
</div>
</div>
</div>
CSS
#container{
width: 600px;
height: 600px;
margin: 0px auto;
background-color:green;
padding: 2px;
}
#table{
display:table;
width:100%;
}
.table-cell{
display:table-cell;
height: 300px;
padding:2px;
}
.t1{
width: 100px;
background-color: red;
}
.t2{
width:auto;
background-color: blue;
}
#content-window{
width:100%;
overflow:scroll;
}
#content{
width: 2000px;
height: 50px;
background-color:yellow;
}
Since you smartly created a #content-window, set it to be a position: absolute; so it won't mess up the cell's auto width. Just remember to set the .t2 to be a position: relative, so the #content-window might fill it in width and height, using the contained space of the right table cell.
tip: Use overflow-x if you want it to scroll only horizontally.
#container{
width: 600px;
height: 600px;
margin: 0px auto;
background-color:green;
padding: 2px;
}
#table {
display:table;
width:100%;
}
.table-cell{
display:table-cell;
height: 300px;
padding:2px;
}
.t1 {
width: 100px;
background-color: red;
}
.t2 {
position: relative;
background-color: blue;
}
#content-window{
position: absolute;
width:100%;
height: 100%;
overflow: hidden;
overflow-x: scroll;
height:50px;
}
#content{
width: 2000px;
height: 50px;
background-color:yellow;
}
Check it here: http://jsfiddle.net/5q51sbqb/4/
Is there a way, without using JavaScript, to cause child divs to extend to the borders of their parent, without exceeding those borders, when you cannot know beforehand the size of the parent div?
Below is a sample markup/style demonstrating my issue. If you load it into a browser, you will see that #two and #three extend outside their parent, #one, and cause scrollbars to appear.
My issue is not so much the scrollbars but that I need to learn how to tell the child divs to occupy the width or height remaining to them rather than the full height or width of the parent.
<html>
<head>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:100%;height:100%;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
</head>
<body>
<div id="one" class="border">
<div id="two" class="border margin"></div>
<div id="three" class="border margin"></div>
</div>
</body>
</html>
I had a similar problem, but in my case, I have content in my div that height-wise will exceed the boundaries of the parent div. When it does, I want it to auto-scroll. I was able to accomplish this by using
.vscrolling_container { height: 100%; overflow: auto; }
you could use display: inline-block;
hope it is useful.
In your example, you can't: the 5px margin is added to the bounding box of div#two and div#three effectively making their width and height 100% of parent + 5px, which will overflow.
You can use padding on the parent Element to ensure there's 5px of space inside its border:
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
#one {padding:5px;width:500px;height:300px;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
EDIT: In testing, removing the width:100% from div#two will actually let it work properly as divs are block-level and will always fill their parents' widths by default. That should clear your first case if you'd like to use margin.
There are two techniques commonly used for this:
Absolute Positioning
Table Styles
Given the HTML you provided here is the solution using Absolute positioning:
body #one {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: auto;
height: auto;
}
body #two {
width: auto;
}
body #three {
position: absolute;
top: 60px;
bottom: 0;
height: auto;
}
<html>
<head>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:100%;height:100%;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
</head>
<body>
<div id="one" class="border">
<div id="two" class="border margin"></div>
<div id="three" class="border margin"></div>
</div>
</body
You can always just use the table, tr, and td elements directly despite common criticisms as it will get the job done. If you prefer to use CSS there is no equivalent for colspan so you will likely end up with nested tables. Here is an example:
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#one {
box-sizing: border-box;
display: table;
height: 100%;
overflow: hidden;
width: 100%;
border: 1px solid black;
}
#two {
box-sizing: border-box;
display: table;
height: 50px;
padding: 5px;
width: 100%;
}
#three {
box-sizing: border-box;
display: table;
height: 100%;
padding-bottom: 60px;
padding-left: 5px;
}
#four {
display: table-cell;
border: 1px solid black;
}
#five {
display: table-cell;
width: 100px;
border: 1px solid black;
}
#six {
display: table-cell;
}
<html>
<div id="one">
<div id="two">
<div id="four"></div>
</div>
<div id="three">
<div id="five"></div>
<div id="six"></div>
</div>
</div>
</html>
For width it's easy, simply remove the width: 100% rule. By default, the div will stretch to fit the parent container.
Height is not quite so simple. You could do something like the equal height column trick.
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:500px;height:300px; overflow: hidden;}
#two {height:50px;}
#three {width:100px; padding-bottom: 30000px; margin-bottom: -30000px;}
you could use inherit
#one {width:500px;height:300px;}
#two {width:inherit;height:inherit;}
#three {width:inherit;height:inherit;}
Make sure the outermost div has the following CSS properties:
.outer {
/* ... */
height: auto;
overflow: hidden;
/* ... */
}
I think I have the solution to your question, assuming you can use flexbox in your project. What you want to do is make #one a flexbox using display: flex and use flex-direction: column to make it a column alignment.
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.border {
border: 1px solid black;
}
.margin {
margin: 5px;
}
#one {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
#two {
height: 50px;
}
#three {
width: 100px;
height: 100%;
}
<html>
<head>
</head>
<body>
<div id="one" class="border">
<div id="two" class="border margin"></div>
<div id="three" class="border margin"></div>
</div>
</body>
</html>
If I've understood you correctly, the easiest method is to float the children. For example:
#one { width: 500px; height: 1%; overflow: hidden; background: red; }
#two { float: left; width: 250px; height: 400px; background: aqua; }
#two { float: left; width: 250px; height: 200px; background: lime; }
Setting a dimension (height/width) and overflow to auto or hidden on the parent element causes it to contain any floated child elements.
Note that overflow:hidden; can occasionally cause problems with content getting cut off, in which case you might want to try this alternative method:
http://www.positioniseverything.net/easyclearing.html
For closure, I think the answer to this question is that there is no solution. The only way to get the behavior I want is with javascript.
If you want the child divs to fit the parent size, you should put a margin at least of the size of the child borders on the child divs (child.margin >= child.bordersize).
For this example, just remove the width:100%; and the height:100% in #one and remove the width:100% in #two. It should be something like this:
html, body {width:100%; height:100%; margin:0; padding:0;}
.border {border:1px solid black;}
.margin {margin:5px;}
\#one {}
\#two {height:50px;}
\#three {width:100px; height:100%;}