Currently I have a web page with a background image size of cover. I would like 2 divs inside of this div with 100% height. These divs need to be responsive. I need the leftside div to have an image to sit on the bottom. I am using clearfix on the main containers but the class pic still goes up to container 1.
HTML
<div class="main-container1 clearfix">
</div>
<div class="main-container2 clearfix">
<div class="wrapper">
<div class="leftside"><img class="pic" src="image/blank.png" /></div>
<div class="rightside"></div>
</div>
</div>
CSS
body {
height:100%;
overflow:scroll;
}
.main-container1 {
background-image:url(../images/footballfieldblur.jpg);
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
min-height:100%;
}
.main-container2 {
background-image:url(../images/footballfieldblur.jpg);
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
min-height:100%;
}
.wrapper {
width:90%;
margin:0 auto;
height:100%;
min-height:100%;
}
.leftside {
width:40%;
height:100%;
min-height:100%;
float:left;
position:relative;
}
.rightside {
width:60%;
height:100%;
min-height:100%;
float:right;
position:relative;
}
.pic {
position:absolute;
bottom:0;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
Alright guys I figured it out. My divs were not expanding 100% height of my clearfix containers because the clearfix class was not 100% height.
.clearfix {
*zoom: 1;
height:100%;
min-height:100%;
}
Related
Here is my fiddle:
http://jsfiddle.net/nom4mxLt/
<div id="wrapper">
<div id="yellow">variable height (I put 200px but can change in realtime)</div>
<div id="red">This one should fill all remaining space, even when yellow resizes</div>
</div>
html, body {
width:100%;
height:100%;
margin:0;
}
#wrapper {
width:100%;
height:100%;
position:relative;
}
#yellow {
width:100%;
height:200px;
background-color:yellow;
}
#red {
position:absolute;
top:200px;
bottom:0;
min-height;250px;
left:0;
width:100%;
background-color:red;
}
This works good when yellow bar has static height, which is not the case in my work.
(without using JS please !)
You can use flexbox with align-items: stretch
http://jsfiddle.net/nom4mxLt/3/
html, body {
width:100%;
height:100%;
margin:0;
}
#wrapper {
width:300px;
height:100%;
position:relative;
display: flex;
flex-flow: column;
}
#first {
width:300px;
height:300px;
background-color:#F5DEB3;
}
#second {
background-color:red;
flex-grow:1;
}
<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>
you may use flex for this kind of layout:
html, body {
width:100%;
height:100%;
margin:0;
}
#wrapper {
display:flex;
flex-flow:column;
height:100%;
}
#yellow {
width:100%;
background-color:yellow;
}
#red {flex:1;/* i will use whole space avalaible remaining in the flex direction of my parent */
background-color:red;
}
<div id="wrapper">
<div id="yellow">variable height <br/> any height but maybe a max-height could come handy to avoid red one to disseapear</div>
<div id="red">This one should fill all remaining space, even when yellow resizes</div>
</div>
To allow wrapper to grow, then min-height can come also usefull
html, body {
width:100%;
height:100%;
margin:0;
}
#wrapper {
display:flex;
flex-flow:column;
min-height:100%;
}
#yellow {
background-color:yellow;
}
#red {flex:1;/* i will use whole space avalaible remaining in the flex direction of my parent */
background-color:red;
}
<div id="wrapper">
<h1>test and resize me in full page mode </h1>
<div id="yellow"> variable height <br/> any height<br/> but maybe a max-height<br/> could come handy <br/>to avoid red one to disseapear<br/> or min-heigh on wrapper</div>
<div id="red">This <br/>one <br/>should fill <br/>all remaining space,<br/> even when yellow resizes</div>
</div>
Here is also some usefull ressource on flex : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am trying to make a 3 column website. Left and right columns are small 240px divs attached to the sides. The middle div is a stretchable area where all the elements inside stretch according to the size of the browser.
So far I have it set up like this :
body, html {
height:100%;
}
body {
margin:0;
}
.container {
background:orange;
height:100%;
width:100%;
overflow:hidden;
}
.left {
width:240px;
height:100%;
background:rgba(0,0,0,0.5);
position:absolute;
top:0;
left:0;
}
.middle {
width:100%;
height:100%;
background:orange;
}
.right {
width:240px;
height:100%;
background:rgba(0,0,0,0.5);
position:absolute;
top:0;
right:0;
}
And:
<div class="container">
<div class="left"></div>
<div class="middle">
// all the content
</div>
<div class="right"></div>
</div><!--container-->
How do I make the content in the middle column stay in between the left and right columns? I was thinking to use margin-left and margin-right but I feel it is not a good way of doing it.
Live:
http://codepen.io/daydreamer/pen/0479cc8de929cedc2ac519280a3044aa
If you are supporting modern browsers, I would try using flexbox:
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.container div {
flex-grow: 1;
height: 50px;
}
.side {
max-width: 240px;
min-width: 240px;
background: red;
}
<div class="container">
<div class="side"></div>
<div class="middle">
// all the content
</div>
<div class="side"></div>
</div>
jsfiddle example
Flexbox resource
You don't need to use margin-left, but margin-right would be useful. I would use float: left and get rid of position: absolute on the left sidebar, and use margin-right: 240px and get rid of width: 100% on the middle div.
CSS:
.left {
width:240px;
height:100%;
background:rgba(0,0,0,0.5);
top:0;
left:0;
float:left;
}
.middle {
height:100%;
background:orange;
margin-right: 240px;
}
.right {
width:240px;
height:100%;
background:rgba(0,0,0,0.5);
position:absolute;
top:0;
right:0;
}
Use Twitter Bootstrap to do n-column design and it will save you a lot of work. Right click on inspect the HTML code on the example page I provided and you'll see that all you need to do is set classes to a few div's and it works when you include the bootstrap JS/CSS files.
i have some div with height:100%, that have within this 3 divs: header, main, footer.
( here you can see an exemple: http://i61.tinypic.com/28mjpya.jpg )
in the 'main' div, i have a scroll, and i need this to be with height:100%
but when i do height:100% to the 'main' div, i cant see the 'footer' div.
and if i will do the 'footer' div with position:absulute; bottom:0px; it will hide my scroll bar of the 'main' div.
how can i solve this problem?
this is my source: http://jsfiddle.net/8YEJY/
<div style='position:fixed; left:0px; width:200px; height:100%;'>
<div id='hearer' style='width:100%; height:40px; background-color:lime;'>
aaa
</div>
<div id='main' style='width:100%; height:100%; overflow:scroll; background-color:green;'>
bbb
</div>
<div id='footer' style='width:100%; height:30px; background-color:pink;'>
ccc
</div>
</div>
Instead of making the content div scroll you could place your header and footer fixed an let the body scroll:
HTML:
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%; /* needs to be set */
}
#header, #footer {
width: 100%;
height: 100px; /* needs to be a fixed width! */
position: fixed;
top 0;
background: lightgreen;
}
#footer {
bottom: 0;
}
#content {
width: 100%;
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
box-sizing: border-box; /* include the padding in the height */
-moz-box-sizing: border-box;
background: lightblue;
}
And a demo.
[EDIT based on your comment]
Change #content to:
#content {
width: 100%;
position: fixed;
top: 100px;
bottom: 100px;
overflow: auto;
background: lightblue;
}
Check the updated demo.
Note: instead of fixed positioning, you could also place #header, #content and #footer absolute, check this link. Result is the same though.
You can use position:absolute; on the #main and #footer like this :
FIDDLE
What I did to your code :
removed the inline styles and put them in a sperate stylesheet. This makes the code cleaner and inline styles are not recommended.
removed position:fixed; on the first container, it isn't needed for your layout.
removed unecessary css properties
changed the tags to HTML 5 tags
set html,body{height:100%;margin:0;} so the #wrap container can expand to the height of the window with height:100%; and position:relative;.
HTML :
<div id="wrap">
<header>aaa</header>
<main>bbb</main>
<footer>ccc</footer>
</div>
CSS :
html,body{
height:100%;
margin:0;
}
#wrap {
width:200px;
height:100%;
position:relative;
}
#header {
height:40px;
background-color:lime;
}
#main {
position:absolute;
width:100%;
top:40px;
bottom:30px;
overflow:scroll;
background-color:green;
}
#footer {
position:absolute;
width:100%;
bottom:0;
height:30px;
background-color:pink;
}
just add position:absolute and some bottom margin,I have added as bottom:0%;
This one works fine
<div style='position:fixed; left:0px; width:200px; height:100%;'>
<div id='hearer' style='width:100%; height:40px; background-color:lime;'>
aaa
</div>
<div id='main' style='width:100%; height:100%; overflow:scroll; background-color:green;'>
bbb
</div>
<div id='footer' style='width:100%; height:30px; background-color:pink;position:absolute;bottom:1%;'>
ccc
</div>
</div>
I want to make a webpage with <div> and 100% height. I keep having problems with the height. I now have a height of 100% + 100px;
I create a header div which is 100px height. That is the only static height I use. Below that div I made another div which should fill the page. But when I set this to 100% it will add 100% to the 100px. When I set this to auto it will be only +- 150px height. This is the HTML
<!-- header -->
<div id="header">
<div id="logo"></div>
<div id="menuTop">menutop</div>
</div>
<!-- center -->
<div id="linkerbalk">
<div id="login">login naam</div>
<div id="menuLinks">Menu<br />Menu<br />Menu<br />Menu<br />Menu<br /></div>
</div>
<!-- footer -->
and the CSS i use is this:
html,body {
height:100%
}
body {
position:relative;
margin:0;
}
#header {
width:auto;
height:100px;
background-color:#FC3;
overflow:hidden;
}
#logo {
background:url(../img/logo.png);
background-position:center;
background-repeat:no-repeat;
background-color:#27c9cb;
height:100px;
width:250px;
float:left;
overflow:hidden;
}
#menuTop {
overflow:scroll;
background-color:#2d2e33;
height:100px;
overflow:hidden;
width:auto;
}
#linkerbalk {
background-color:#2d2e33;
height:100%;
width:250px;
float:left;
overflow:auto;
}
#login {
background-color:#2faaaf;
height:35px;
width:auto;
overflow:hidden;
}
#menuLinks {
height:auto;
width:auto;
overflow: hidden;
}
Following is one of the ways to achieve this:
I have wrapped your HTML with a container div and given it 100% - height of header i.e. 100px.
.container{
height:calc(100% - 100px)
}
Working fiddle here.
You need a wrapper.
<body>
<div id="wrapper">
<div class='top'>
</div>
<div class='mid'>
</div>
<div class='bot'>
</div>
</div>
</body>
* {
margin: 0;
padding: 0;
}
body,
#wrapper {
height: 100%;
}
.top {
height: 20%;
}
.mid {
height: 70%;
}
.bot {
height: 10%;
}
I have the following issue with the next code posted in JSFiddle: http://jsfiddle.net/b9XVV/1/
HTML
<div class="content">
<div class="header">THGE HEADER OF THE PAGE</div>
<div class="thebody">
HERE GOES THE CONTENT OF THE PAGE......
</div>
<div class="footer">
<div class="footerContent">
<div class="footer1">Footer section</div>
<div class="footer2"></div>
</div>
</div>
</div>
CSS
.header {
width:100%;
height:50px;
background-color:#FFFF58;
}
.thebody {
width:500px;
height:400px;
margin:0 auto;
background-color:#DDD;
}
.footer {
width:500px;
height:50px;
background-color:#696969;
margin:0 auto;
}
.footerContent {
width:500px;
height:50px;
}
.footer1 {
width:400px;
height:50px;
float:left;
}
.footer2 {
width:100px;
height:50px;
float:left;
background-color:#FFddFF;
position:fixed;
right:0;
}
The question is that the pink Div should always stay on the footer and fixed on the right, but if window width is less than body width plus pink Div width, the pink Div should be kept on the left of the main footer (500px width)
Another issue is that scrolling the content, the pink div should always stay at the same level of the footer.
CSS:
.footer2 {
width:100px;
height:50px;
background-color:#FFddFF;
}
#media all and (max-width: 649px){
.footer2 {
position: inline;
float: right
}
}
#media all and (min-width: 650px){
.footer2 {
position:fixed;
right:0;
bottom: 0;
}
}
Demo: http://jsfiddle.net/b9XVV/2/
Watch the compatibility of the media queries: http://caniuse.com/#feat=css-mediaqueries Your main problem (if applicable) is IE8.