I'm trying to set a div height to 10% (height: 10%; )
It works perfectly in Chrome, but in Edge, the height screws up and appears way shorter than expected (like 1%).
It seems that if I give it a px value (50px) it works on both browsers, but that's not what I'm looking for.
I'm using Bootstrap, although I don't think that's a problem.
Is there any other way to fix this than specifically setting a fixed value for Edge in the CSS?
This was the most I could reduce the files in order to reproduce the problem:
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<div class="grid">
<div class="col1">
<div class="col1content">
<div class="col1title">
Connected users
</div>
<div class="nameform">
<form action="">
<div class="col-md-9 inputdiv">
<input class="nameinput" placeholder="What's your name?" />
</div>
<div class="col-md-3 btndiv">
<button class="btn btn-success namebtn" type="button">OK</button>
</div>
</form>
</div>
</div>
</div>
<div class="col2" id="chatbox">
<div class="chat" id="chat">Welcome.</div>
<div class="msgbox" id="msgbox">
<form id="chatform" action="">
<input class="writebox" id="msg" placeholder="Type your message here..." autocomplete="off">
<button class="btn btn-primary chatbtn" id="chatbutton" type="button">Send</button>
</form>
</div>
</div>
</div>
</div>
</body>
body, html {
height: 100%;
}
.grid {
display: flex;
flex-flow: row;
height: 83%;
position: relative;
width: 100%;
margin:5px;
}
.col1 {
position: relative;
background-color: #f2efe8;
width:50%;
height: 100%;
float: left;
margin-right: 5px;
font-family: "Segoe UI";
}
.col1content {
margin: 5px 10px;
}
.nameform {
position: absolute;
bottom: 5;
right: 5;
height: 10%;
}
.nameinput {
height:100%;
max-width: 100%;
width: 100%;
}
.inputdiv {
padding-right: 5px;
padding-left: 5px;
}
.btndiv {
padding-right: 5px;
padding-left: 2.5px;
height: 100%;
}
.namebtn {
max-width: 100%;
width: 100%;
height: 100%;
}
.col2{
position: relative;
background-color: #1d2120;
width:100%;
float: right;
margin-left: 5px;
color: white;
font-family: "Segoe UI";
border: medium solid #1d2120;
}
.chat {
width:100%;
height:87%;
overflow:auto;
}
.msgbox {
height:10%;
display:block;
background-color:#ffffff;
height: 10%;
width:100%;
position:absolute;
bottom: 0;
color: #000000;
border-radius: 2px;
}
.chatbtn {
position: absolute;
top: 1;
right: 2;
bottom: 1;
width: 15%;
display: inline-block;
}
.writebox {
background: transparent;
display:inline-block;
border: 0;
height:100%;
width: 83%;
margin-left: 5;
}
.separator{
position:absolute;
left:34%;
top:25%;
bottom:10%;
height: 70%;
border-left:1px solid #8c8b8b;
}
.container {
display: flex;
align-items: stretch;
flex-flow: column;
background-color: #feffff;
border-radius: 10px;
box-shadow: 0px 0px 10px black;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 70%;
height: 70%;
margin: auto;
}
centered {
display: flex;
justify-content: center;
}
Example here: Fiddle
Try to be more specific
But if you want to set the div 10percnet of viewport this might help
height:10vh;
Discussed here in detail
Make div 100% height of browser window
Related
I know a lot of people asked that already but nothing seems to work. I want my footer to be on the bottom of the page. So far it is on the bottom of the screen, but if the page is bigger and you need to scroll, it just sticks there and stays in the middle. If I put position: fixed the footer scrolls with you. I want it to be at the VERY BOTTOM of the page, though, so you have to scroll down to see it in the first place, if the page is too big.
I tried several different wrappers and pushers but nothing seems to work.
You should overthink your layout and read about the HTML box model.
I put all your elements in a wrapper which is position: relative, so the footer with position: absolute can align properly. Also I had to remove position: absolute of .pageframe:
.pagelist {
background-color: deeppink;
position: relative;
float: right;
width: 20%;
height: 70%;
overflow-y: scroll;
margin-right: 10px;
}
.pageimg {
position: relative;
float: left;
width: 100%;
min-height: 500px;
text-align: center;
display: flex;
align-items: center;
}
.pageimg img {
margin: 0 auto;
}
.pagetext {
position: relative;
float: left;
margin-top: 1%;
width: 100%;
text-align: center;
padding-bottom: 10px;
}
.pageframe {
/* position: absolute; */
width: 75%;
margin-left: 10px;
text-align: center;
}
.comiclist {
background-color: lightgrey;
padding-left: 5px;
width: 90%;
}
.floatbutt-right {
float: right;
}
.floatbutt-left {
float: left
}
.footer {
position: absolute;
width: 100%;
bottom: 0;
height: 30px;
background-color: lightgrey;
font-size: 12px;
color: grey;
}
.footer span {
float: right;
margin-top: 5px;
margin-right: 10px;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.spacer {
width: 100%;
height: 95px;
}
.content {
height: 100%;
width: 100%;
margin-bottom: -30px;
/* Footer */
}
#wrapper {
min-width: 100%;
min-height: 100%;
display:inline-block;
position:relative;
}
<head lang="de">
<link rel="stylesheet" href="inc/layout.css">
<script src="inc/javascript.js"></script>
<meta charset="UTF-8" />
<title>komix.lit</title>
</head>
<body>
<div id="wrapper">
<div id="navbar">
<img class="logo" src="inc/logo.png" /> komix.lit
<button id="home" class="navbutt" onClick="location.href='home.php'">Home</button>
<button id="comics" class="navbutt" onClick="location.href='komix.php'">Komix</button>
<button id="login" class="navbutt" onClick="location.href='login.php'">Einloggen</button></div>
<div class="content">
<div class="spacer"></div>
<div class="pagelist">
<ul style="list-style-type: none;">
<li><a style='text-decoration: none; color: black;' href='pages.php?id=84'>Seite 1</a></li>
<li><a style='text-decoration: none; color: black;' href='pages.php?id=86'>Seite 2</a></li>
<li><a style='text-decoration: none; color: black;' href='pages.php?id=85'>Seite 3</a></li>
</ul>
</div>
<div class='pageframe'>
<div class='pageimg' style='height: 1024;'>
<img src='komix\19_03_18_10_21_31-12.jpg' alt='seite 1' style='max-width:100%' /> </div>
<div class='pagetext'>seite 1</div><button class='floatbutt-right' onClick="location.href='pages.php?id=86'">nächste Seite</button></div>
</div>
<div class="footer">
<span>text</span>
</div>
</div>
</body>
</html>
You can try this, hope this will help you
Remove min-height for pageimg class and content class then you will get your output.
.pagelist {
background-color: deeppink;
position: relative;
float: right;
width: 20%;
height: 70%;
overflow-y: scroll;
margin-right: 10px;
}
.pageimg {
position: relative;
float: left;
width: 100%;
/* min-height: 500px; */
text-align: center;
display: flex;
align-items: center;
}
.pageimg img {
margin: 0 auto;
}
.pagetext {
position: relative;
float: left;
margin-top: 1%;
width: 100%;
text-align: center;
padding-bottom: 10px;
}
.pageframe {
position: absolute;
width: 75%;
margin-left: 10px;
text-align: center;
}
.comiclist {
background-color: lightgrey;
padding-left: 5px;
width: 90%;
}
.floatbutt-right {
float: right;
}
.floatbutt-left {
float: left
}
.footer {
position: absolute;
width: 100%;
bottom: 0;
height: 30px;
background-color: lightgrey;
font-size: 12px;
color: grey;
}
.footer span {
float: right;
margin-top: 5px;
margin-right: 10px;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.spacer {
width: 100%;
height: 95px;
}
.content {
width: 100%;
margin-bottom: -30px;
/* Footer */
}
<div id="navbar">
<img class="logo" src="inc/logo.png" />
komix.lit
<button id="home" class="navbutt" onClick="location.href='home.php'">Home</button>
<button id="comics" class="navbutt" onClick="location.href='komix.php'">Komix</button>
<button id="login" class="navbutt" onClick="location.href='login.php'">Einloggen</button></div>
<div class="content">
<div class="spacer"></div><div class="pagelist"><ul style="list-style-type: none;"><li><a style='text-decoration: none; color: black;' href='pages.php?id=84'>Seite 1</a></li><li><a style='text-decoration: none; color: black;' href='pages.php?id=86'>Seite 2</a></li><li><a style='text-decoration: none; color: black;' href='pages.php?id=85'>Seite 3</a></li></ul></div><div class='pageframe'><div class='pageimg' style='height: 1024;'>
<img src='komix\19_03_18_10_21_31-12.jpg'
alt='seite 1' style='max-width:100%'/> </div><div class='pagetext'>seite 1</div><button class='floatbutt-right' onClick="location.href='pages.php?id=86'">nächste Seite</button></div></div>
<div class="footer">
<span>text</span>
</div>
I created a layout with 4 columns centered with margin and a triangle as an arrow-down with a star in the middle...
this is working nice in my computer:
But triangle and star are far away to be responsive, only way I achieved to position it correctly is with absolute position:
.triangle-down {
display: block;
position: absolute;
top: 0;
left: 318px;
width: 0;
height: 0;
border-left: 532px solid transparent;
border-right: 532px solid transparent;
border-top: 400px solid blue;
}
.star {
display: block;
position: absolute;
vertical-align: middle;
font-size: 250px;
text-align: center;
color: white;
top: -434px;
left: -109px;
}
How can I put the element in top of the others and make it responsive in the same way columns and it's margins?
NOTES:
layout is a countdown, but javascript is not important for the question.
You can find a functional (no JS) fiddle here
You can see actual result (with JS) here
I can use sass if necessary
How about this updated fiddle?
https://jsfiddle.net/ondrakoupil/0rtvcnon/11/
Basically, these are the changes:
use flexbox for column layout
sizes are measured using viewport-relative units (vw)
triangle is created as standard rectangular <div> and rotated via CSS - you have better control over its position and size
There are some CSS3 techniques used. For IE, you'll need to prefix them in CSS (use Autoprefixer). Other browsers should handle it "as it is".
html, body {
height: 100%;
margin: auto;
padding-left:1%;
background: yellow;
font: normal 16px 'Roboto', sans-serif;
}
.container {
margin: auto;
width: 80%;
height: 100%;
position: relative;
display: flex;
justify-content: space-between;
}
.bar {
background: red;
font-weight: 700;
text-align: center;
color: yellow;
width: 15%;
}
.init {
position:absolute;
bottom: 10px;
right: 20px;
background: yellow;
margin-left: 0px;
font-weight: 700;
text-align: right;
color: red;
}
a:link, a:visited {
color: red;
text-decoration: none;
}
::-moz-selection {
color: yellow;
background: red;
}
::selection {
color: yellow;
background: red;
}
p.numbers {
font-size: 8vw;
margin-top: 45vw;
margin-bottom: 20px;
}
p.meta, p.strings {
font-size: 2vw;
}
h1 {
font-size: 4.5em;
}
.triangle-down {
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
}
.triangle-color {
margin: auto;
width: calc(80vw / 1.4142);
height: calc(80vw / 1.4142); /* sqrt of 2 */
background-color: blue;
transform: translateY(calc(-1 * 80vw / 1.4142 / 2)) rotate(45deg);
}
.star {
position: absolute;
vertical-align: middle;
font-size: 15vw;
text-align: center;
color: white;
top: 5vw;
left: 0;
right: 0;
z-index: 1;
}
<body>
<div class="container">
<div class="triangle-down">
<div class="triangle-color"></div>
<div class="star">★</div>
</div>
<div class="bar">
<p id="d" class="numbers days">00</p>
<p class="strings">DIES</p>
</div>
<div class="bar">
<p id="h" class="numbers hours">00</p>
<p class="strings">HORES</p>
</div>
<div class="bar">
<p id="m" class="numbers minutes">00</p>
<p class="strings">MINUTS</p>
</div>
<div class="bar">
<p id="s" class="numbers seconds">00</p>
<p class="strings">SEGONS</p>
</div>
</div>
<div class="init">
ENTRA
</div>
</body>
Take a look at this. I was need to rewrite it from scratch, because you've got a lot of absolutes and they all calculated through js, as I understood. Hope, this will satisfy your requirements.
html, body {
margin: 0;
height: 100%;
}
.container {
width: 100%;
height: 100%;
background-color: yellow;
font: normal 16px 'Roboto', sans-serif;
position: relative;
}
.triangle-aspect-keeper {
width: 50%;
padding-bottom: 50%;
position: relative;
margin-left: auto;
margin-right: auto;
}
.triangle-container {
}
.triangle-down {
width: 100%;
height: 100%;
background-color: blue;
transform: rotate(45deg);
position: absolute;
top: -50%;
left: 0;
}
.star {
font-size: 1100%;
text-align: center;
color: white;
width: 100%;
line-height: 200%; /* control star vertical position */
position: absolute;
top: 0;
left: 0;
}
.bar-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
.bar-inner-container {
margin-left: auto;
margin-right: auto;
width: calc(50% * 1.41); /* sqrt(2) = 1.41. Length of the diagonal of the square*/
height: 100%;
display: flex;
justify-content: space-between;
}
.bar:first-child {
margin-left: 0;
}
.bar {
background-color: red;
height: 100%;
width: 15%;
color: yellow;
font-weight: 700;
}
p.numbers {
font-size: 5em;
margin-top: 350%;
}
p.meta, p.strings {
font-sie: 1.5em;
}
a:link, a:visited {
color: red;
text-decoration: none;
}
.init {
position: absolute;
bottom: 0;
right: 0;
padding: 10px;
font-weight: 700;
}
<body>
<div class="container">
<div class="bar-container">
<div class="bar-inner-container">
<div class="bar bar-first">
<p id="d" class="numbers days">00</p><br>
<p class="strings">DIES</p><br>
</div>
<div class="bar bar-second">
<p id="h" class="numbers hours">00</p><br>
<p class="strings">HORES</p><br>
</div>
<div class="bar bar-third">
<p id="m" class="numbers minutes">00</p><br>
<p class="strings">MINUTS</p><br>
</div>
<div class="bar bar-fourth">
<p id="s" class="numbers seconds">00</p><br>
<p class="strings">SEGONS</p><br>
</div>
</div>
</div>
<div class="triangle-aspect-keeper">
<div class="triangle-container">
<div class="triangle-down"></div>
<div class="star">★</div>
</div>
</div>
<div class="init">
ENTRA
</div>
</div>
</body>
#import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
html,
body {
background: yellow;
height: 100%;
}
.container {
position: relative;
height: 100%;
}
.row {
height: 100%;
}
.col-xs-3 {
height: 100%;
}
.col-xs-3,
.col-xs-12 {
padding: 0 6.25%;
}
.bar {
color: yellow;
background: red;
min-height: 100%;
padding-top: 333%;
}
.triangle-down {
position: absolute;
width: 100%;
height: auto;
z-index: 1;
}
.triangle-color {
margin-bottom: -30%;
}
.triangle-color * {
fill: blue
}
.star * {
fill: white
}
.numbers {
font-size: 5vw;
padding-bottom: 2vw;
}
.strings {
font-size: 1.5vw;
}
<div class="container text-center">
<div class="row triangle-down">
<div class="col-xs-12">
<svg class="triangle-color" viewBox="0 0 100 40">
<polygon points="0,0 100,0 50,40"/>
</svg>
<svg class="star" viewBox="0 0 1400 188">
<polygon points="700,0 640,188 790,68 610,68 760,188"/>
</svg>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">DIES</div>
</div>
</div>
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">HORES</div>
</div>
</div>
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">MINUTS</div>
</div>
</div>
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">SEGONS</div>
</div>
</div>
</div>
</div>
You can simply do this.
HTML:
<div class="parent">
<div class="triangle">
<div class="star">
...
</div>
</div>
</div>
CSS:
.parent {
width: xx%; /*Whatever percentage*/
height: yy%; /*Whatever percentage*/
margin: 0 auto;
position: relative;
}
.triangle {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.star {
font-size: xx%; /*some percentage (assuming star is a font icon)*/
position: absolute;
top: 15vh;
margin: 0 auto;
}
I have 4 div, which look something like this
Desired output:
Current code:
<div class="center aligned" style="width: 100%;height: 7em; padding: 2em; position:absolute;">
<div class="ui small grey label fluid progress_padding_top_bottom" style="z-index:1;height: 7em; border-radius: 0; padding-right: 0; padding-left: 0; background-color: #E8E8E8 !important;">
<div style="background-color: #21BA45; width: 5%; height: 7em; float:left;"></div>
<div style="background-color: #ffdd00; width: 20%; height: 7em; float:left;"></div>
<div style="width: 100%;" class="center aligned">ABC</div>
</div>
Update: This is a part of a progress bar, so both red and yellow width will change
Wrap the colored divs in their own container and position it absolutely unde rthe content.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wrapper {
width: 50%;
margin: 1em auto;
background: lightgrey;
height: 7em;
display: flex;
justify-content: center;
align-items: center;
position: relative;
font-weight: bold;
}
.content {
position: relative;
z-index: 1;
}
.underlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.red {
height: 100%;
background: red;
width: 25%;
float: left;
}
.yellow {
height: 100%;
background: yellow;
float: left;
width: 25%;
}
<div class="wrapper">
<div class="content">ABC</div>
<div class="underlay">
<div class="red"></div>
<div class="yellow"></div>
</div>
</div>
This produces what you're trying to putput
https://jsfiddle.net/wcsfnbuL/
<div class="center aligned" style="width: 100%;height: 7em; padding: 2em; position:absolute;">
<div style="background-color: red; width: 15%; height: 7em; float:left; margin: auto;"></div>
<div style="background-color: #ffdd00; width: 15%; height: 7em; text-align: center; vertical-align: middle; line-height: 7em; float:left; margin: auto;">ABC</div>
<div class="ui small grey label fluid progress_padding_top_bottom" style="z-index:1;height: 7em; border-radius: 0; padding-right: 0; padding-left: 0; background-color: #E8E8E8; float: left; width: 15%"></div>
</div>
Everything on my page centers horizontally, including my buttons. However - when I resize my window, the buttons move vertically and off the page. Here is my jsfiddle: http://jsfiddle.net/rjord00r/utjhyckt/
.buttons {
text-align: center;
margin-top: 380px;
}
.buttons button {
padding: 8px;
border: none;
background-color: lightgrey;
font-weight: 500;
font-size: 13px;
position: relative;
text-align: center;
}
Thanks for your help!
This for you:
.searchBox{
position: fixed;
top: 50%;
left: 50%;
margin-top: -92px;
margin-left: -225px;
width: 450px;
text-align:center;
}
.logo {
width: 272px;
}
.search {
width: 450px;
height: 28px;
margin:15px 0px;
}
.search-bar{
position:relative;
}
#icon img {
position: absolute;
height: 28px;
width: 30px;
right: 0px;
top: 18px;
}
input:focus {
border-color: blue;
}
.buttons {
text-align: center;
}
.buttons button {
padding: 8px;
border: none;
background-color: lightgrey;
font-weight: 500;
font-size: 13px;
position: relative;
text-align: center;
}
<div class="searchBox">
<div class="centered">
<img class="logo" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
<div class="search-bar">
<form>
<input type="text" class="search">
<div id="icon">
<img src="http://i.imgur.com/l5S4LZ2.png" />
</div>
</form>
</div>
<div class="buttons">
<button type="button">Google Search</button>
<button type="button">I'm Feeling Lucky</button>
</div>
</div>
There's a lot of unnecessary positioning, margins and elements in your example. To be able to achieve what I think you're after, I've had to change a few things.
See new EXAMPLE here.
Here's a summary of the changes : -
HTML
<div class="wrapper">
<div class="centered">
<img class="logo" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
<form class="search-bar">
<input type="text" class="search">
<div id="icon">
<img src="http://i.imgur.com/l5S4LZ2.png" />
</div>
</form>
<div class="buttons">
<button type="button">Google Search</button>
<button type="button">I'm Feeling Lucky</button>
</div>
</div>
</div>
CSS
.wrapper {
display: block;
position: relative;
width: 100%;
height: 750px;
}
.centered {
position: absolute;
top: 25%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
}
.logo {
width: 272px;
}
.search {
width: 400px;
height: 28px;
}
.search-bar {
position: relative;
}
#icon img {
position: absolute;
height: 28px;
width: 30px;
right: 0px;
top: 3px;
}
.buttons {
text-align: center;
margin-top: 10px;
}
NOTE - I've removed anything from the example that I haven't changed.
Im here because other similar questions couldn't help my particular problem.
How can #right div height making 100% ?
Only css solution needing. Thanks.
http://jsfiddle.net/elturko/86nX9/
HTML
<div id="wrap">
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrap{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
background:#ddd
}
#header{
height:104px;
background:#d5a1b3;
}
#left{
float:left;
width:219px;
background:#a2d025;
}
#right{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
overflow:hidden;
background:#FFF;
margin:0 15px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
padding:14px;
}
#footer{
clear:both;
height:15px;
background:#ed653a;
}
Here's 2 Pure CSS solution
Without fixing any height (header/footer) or width (left column).
I actually prefer the second solution. (even tho he has less browser support)
1 - using CSS tricks
this is a totally responsive design and work well with all browsers (IE10, FF, Chrome, Safari, Opera, mobile browsers)
Working Fiddle
HTML:
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="LeftMenu">
</div>
<div class="Content">
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.LeftMenu
{
height: 100%;
float: left;
}
.Content
{
overflow: auto;
height: 100%;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
body > .Container
{
text-align: center;
}
.Header
{
background-color: #bf5b5b;
}
.LeftMenu
{
background-color: #bdbe4c;
}
.Content
{
background-color: #90adc1;
}
.Footer
{
background-color: #b5a8b7;
}
2 - using Flex
This layout can also be achieved using flex, but the current browser support is pure.
Here's a Working Fiddle only FF,Chrome,IE10.
HTML: (simpler)
<header>
</header>
<section class="Middle">
<div class="LeftMenu">
</div>
<div class="Content">
</div>
</section>
<footer>
</footer>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
text-align: center;
}
body
{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.Middle
{
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.Content
{
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 0 0;
overflow: auto;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
header
{
background-color: #bf5b5b;
}
.LeftMenu
{
background-color: #bdbe4c;
}
.Content
{
background-color: #90adc1;
}
footer
{
background-color: #b5a8b7;
}
Take this out of css for #right{} :
margin:0 15px;
This will make it wide 100%. I'm a little confused on the 100% height. Did you meant wide?
Important will over-ride other CSS attributes and auto will make the div as large as it needs to be to fit the contents.
height: auto !important;
height: 100%;
Try this:
#right{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
overflow:hidden;
background:#FFF;
margin:0 15px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
padding:14px;
top: 0px;
bottom: 0px;
}
Add top: 0px; bottom: 0px; to your #right css
I restructured your html a bit. Is that your desired outcome?
jsfiddle
<div id="container">
<div id="wrap">
<div id="header">
header
</div>
<div id="body">
<div id="left">
left
</div>
<div id="right">
right<br>
right<br>
right<br>
right<br>
right<br>
</div>
</div>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
css
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
#container {
height: 100%;
height: auto !important;
min-height: 100%;
}
#wrap {
overflow: auto;
padding-bottom: 16px;
}
#header {
height: 104px;
background:#d5a1b3;
border-bottom: 1px solid #000;
}
#body {
overflow: hidden;
height: 100%;
}
#right {
margin: 0px 0px 0px 220px;
background:#FFF;
}
#left {
width: 219px;
float: left;
background:#a2d025;
}
#footer {
background:#ed653a;
border-top: 1px solid #000;
position: relative;
height: 20px;
margin-top: -21px;
clear: both;
}
#footer p {
margin: 0px;
}