Heren, damens,
Ben bezig met een design liquid, zowel fullheight te maken.
Zowel het liquid, als de fullheigt op de container zijn geen enkel probleem.
Waar bij mij een knelpunt zit is bij de content die ik het liefst fullheight ziet.
Wanneer men hieronder mijn werkversie kopiert staat er in .colmask een vaste min-height van 500px, deze wil ik het liefst naar een 100%.
Zijn er mensen die dit probleem reeds eerder opgelost hebben en mij hierbij willen helpen? Uiteraard heb ik al het benodigde research gedaan en ben benieuwd wie het wel gelukt is.
Hoor graag van jullie :thumb:
Ben bezig met een design liquid, zowel fullheight te maken.
Zowel het liquid, als de fullheigt op de container zijn geen enkel probleem.
Waar bij mij een knelpunt zit is bij de content die ik het liefst fullheight ziet.
Wanneer men hieronder mijn werkversie kopiert staat er in .colmask een vaste min-height van 500px, deze wil ik het liefst naar een 100%.
Zijn er mensen die dit probleem reeds eerder opgelost hebben en mij hierbij willen helpen? Uiteraard heb ik al het benodigde research gedaan en ben benieuwd wie het wel gelukt is.
Hoor graag van jullie :thumb:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" >
<head>
<title>Voorbeeld</title>
<style media="screen" type="text/css">
/**
* Html
*/
html {
background: #bfc770;
height:100%;
min-height:100%;
overflow-y: scroll;
}
/**
* Body
*/
body {
height:100%;
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
min-width:900px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
overflow: hidden; /* remove ie's main scrollbar */
}
/**
* Container
*/
div#container {
background: #d8d8d8;
width: 85%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -29px; /* the bottom margin is the negative value of the footer's height */
border: 2px #006633;
}
/**
* Header
*/
#header {
background: #606060;
height: 157px;
color: #FFFFFF;
margin: 0 auto;
}
/**
* Menu
*/
div#menu{
margin: 10px;
border: 1px solid #cccccc;
}
/**
* column container
*/
.colmask {
background:#ffffff;
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
border: 1px solid red;
min-height: 100%;
height: 100%;
min-height: 500px;
}
/**
* common column settings
*/
.colleft {
float:left;
width:100%;
position:relative;
}
.col1,
.col2 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
.colleft {
right:75%; /* right column width */
background:#f4f4f4; /* left column background colour */
}
.col1 {
width:71%; /* right column content width */
left:102%; /* 100% plus left column left padding */
}
.col2 {
width:21%; /* left column content width (column width minus left and right padding) */
left:6%; /* (right column left and right padding) plus (left column left padding) */
}
/**
* Footer
*/
div#footer {
width: 85%;
margin: 0 auto;
background: #606060;
height: 29px;
font-size: 9px;
color: #999999;
text-align: right;
}
#div#footer p{
padding: 9px 22px 0 0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="menu">
Menu bar
</div>
<div class="colmask">
<div class="colleft">
<div class="col1">
content
</div>
<div class="col2">
menu
</div>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
