| |
|
|
| | Здравствуйте.
Сам я не версталщик и дальше табличной верстки не ушел, однако ж прищлось заняться дивной версткой. Обгуглился до посинения, но решения я так и не нашел, так что надеюсь кто-то сможет подсказать мне решение проблемы.
Задача в следующем:
Нужно сверстать 3ех колоночный диз, боковые колонки фиксированной ширины - по 200пикселей, центральная часть - резиновая. Боковые колонки - красные, а центральная часть - желтая. Это важно!
Это у меня с горем пополам получилось, но тут обнаружилась проблема, если ЦЕНТРАЛЬНАЯ колонка при наполнении контентом, опускается ниже боковых колонок - все отлично. Но если опускается БОКОВАЯ колонка - центральная не прижимается к футеру, а остается такой же по высоте как и ее контент. С белым фоном на центральной колонке - все смотрится отлично, но с желтым - сразу видно что что-то не так.
Иллюстрация http://istroi37.ru/
Код
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3 equalising column min-max with sticky footer</title>
<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0;
}
body {background:#333;}
h1, h2, h3, h4, h5, h6, p, form {
margin:0 0 .7em
}
h1, h2 {
text-align:center;
}
#wrapper {
margin:0px auto;
background:#fff;/* center column colur*/
text-align:left;
position:relative;
margin-top:-60px;/* make space for footer*/
z-index:0;
min-height:100%;
//min-width:700px;
//max-width:1200px;
width:100%;
border-right:1px solid #000;
border-left:1px solid #000;
}
#header {
background:#ccc;
color:black;
clear:both;
position:relative;
z-index:2;
width:100%;
border-top:60px solid #fff;/* soak up negative margin to make way for footer*/
border-bottom:1px solid #000;
padding:0 0 1px;
}
#footer {
background:#ccc;
color:black;
//min-width:700px;
//max-width:1200px;
width:100%;
clear:both;
margin:auto;
position:relative;
z-index:2;
height:59px;
font-size: 11px;
text-align:center;
border-top:1px solid #000;
}
/*if we float the middle column we avoid the ie6 3 pixel jog and also keep columns in normal source order (left,middle right) but we need to use a negative margin offset to make it all fit.*/
#middle {
float:left;
width:100%;
margin-right:-400px;/* width of left and right columns */
}
#content {
margin-right:400px;/* width of left and right columns */
background: #f0e4d0;
}
#left {
background: #a7521f;
//width:150px;
width:200px;
position:relative;
float:left;
z-index:2;
font-size:11px;
}
#right {
background: #a7521f;
//width:150px;
width:200px;
position:relative;
float:right;
z-index:2;
font-size:11px;
}
/*The following 2 absolute columns that just hold the column colours */
/* there is no need to worry about being removed from the flow because these do not hold content but are just stuck to the parent container and set at 100% height. This ensures that they grow with the parent container. Its a shame that this behaviour doesn't apply to static elements and we'd all be a lot happier. */
#c {
background: #f0e4d0;
width:100%;
z-index:1;
height:100%;
}
#l {
width:200px;
//width:149px;
height:100%;
position:absolute;
bottom:0;
left:0;
//background:#eee;/* left column color*/
background: #a7521f;
z-index:1;
clear:both;
border-right:1px solid #000;
}
#r {
position:absolute;
height:100%;
right:0;
//background:#ddd;/* right column color*/
background: #a7521f;
z-index:1;
//width:150px;
width:200px;
bottom:0;
clear:both;
border-left:1px solid #000;
}
* html #l, * html #r {
height:999em;
bottom:-1px
}
p {
padding:5px;
}/* some breathing space*/
/* clear without structural mark-up */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* mac hide - force layout in ie \*/
.clearfix {display: block;}
/* End hide */
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
#inner {
width:100%;
overflow:hidden;
position:relative;
z-index:3;
}
</style>
<!--[if (lte IE 6)|(gte IE 8)]>
<style type="text/css">
#wrapper {height:100%;display:table;}/* ie8 fix for sticky footer */
* html #content{height:1%}
* html #wrapper,* html #footer {
/* We use a CSS expression for the INITIAL width ref:http://www.stevesouders.com/hpws/event-handler.php */
width: expression(setElemWidth(this) );
}
</style>
<![endif]-->
<!--[if lte IE 6]>
<script type="text/javascript">
// apply min-width to the wrapper and footer elements for ie6 - set your ids here
function setMinWidth() {
var aElement1 = document.getElementById("wrapper");
var aElement2 = document.getElementById("footer");
aElement1.runtimeStyle.width = ((d = document.compatMode == "CSS1Compat" ? document.documentElement : document.body) && (d.clientWidth > 1200 ? "1200px" : d.clientWidth < 700 ? "700px" : "auto") );
aElement2.runtimeStyle.width = ((d = document.compatMode == "CSS1Compat" ? document.documentElement : document.body) && (d.clientWidth > 1200 ? "1200px" : d.clientWidth < 700 ? "700px" : "auto") );
}
// Set the width of an element
function setElemWidth(elem) {
// Replace the CSS expression with a static value.
elem.runtimeStyle.width = ((d = document.compatMode == "CSS1Compat" ? document.documentElement : document.body) &&
(d.clientWidth > 1200 ? "1200px" : d.clientWidth < 700 ? "700px" : "auto"));
}
// This only sets the size AFTER a resize event.
if ( -1 != navigator.userAgent.indexOf("MSIE") ) {
window.onresize = setMinWidth;
}
</script>
<![endif]-->
</head>
<body>
<div id="wrapper" class="clearfix">
<div id="inner">
<div id="header">
<h1>3 column 100% high min-max layout with equal columns and a sticky footer - whew!</h1>
</div>
<div id="left">
<p>Go to <a href="3col-min-max-basic.htm">Basic version</a> with no equal columns and no sticky footer.</p>
<p><a href="http://www.pmob.co.uk/temp/3colfixedtest_4.htm">Original 3 column layouts</a> (circa 2003)</p>
<p>Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : </p>
</div>
<div id="middle">
<div id="content">
<h2></h2>
<h2>How it works - in brief</h2>
<p>This layout uses three floats for the columns even though the middle column is a fluid width we can achieve this by using a 100% width float for the middle column and then applying a right negative margin equal to the widths of the left and right columns.</p>
<p>A <a href="http://www.search-this.com/2007/08/01/the-positive-side-of-negative-margins/">negative margin</a> on the opposite side of a float (opposite to the direction it is floated) doesn't change the width of a float but instead allows other content to approach from that side by the amount of the negative margin.</p>
<p>This would result in overlap of course so we need one extra html element to nest inside the middle floated column that has a margin-right equal to the combined width of the left and right floats and this then keeps the content clear of the side floats.</p>
<p>The <strong>benefit</strong> of floating all three columns is that we avoid the 3 pixel jog in IE6 and it also allows the html to remain in sensible source order in that left, middle and right columns follow each other logically in the html.</p>
<p>The <strong>drawback</strong> of this technique is that you must control the minimum width of the centre column before the content overflows or the columns will drop in IE6.</p>
<p>The min max routine for IE6 (as ie6 doesn't understand min/max width) is provided by javascript and a once only expression which avoids the speed issues with using expressions. (See <a href="http://www.stevesouders.com/hpws/event-handler.php">Steve Souders</a> for more information on this.)</p>
<p>The sticky footer is a combination of my old techniques and the results of a brain storming session on Sitepoint where a quiz I set refined the details into an all purpose sticky footer. You can see the quiz and read how <a href="http://www.sitepoint.com/forums/showthread.php?t=611825">it all evolves here</a>. A stripped down version of the footer technique is <a href="http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm">shown here</a> in all it's glory.</p>
<p>Lastly the full column colours are achieved with my absolute column overlay technique that I invented some years ago and uses two extra divs to supply just column colours. The full details are shown in my <a href="http://www.search-this.com/2007/02/26/how-to-make-equal-columns-in-css/">original article</a> and as shown in <a href="http://www.pmob.co.uk/temp/3col-fluid-round.htm">this demo</a>.</p>
</div>
</div>
<div id="right">
<p>Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : </p>
<p>Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : </p>
<p>Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : </p>
<p>Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : </p>
<p>Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : </p>
<p>Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : </p>
<p>Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : </p>
<p>Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : </p>
</div>
</div>
<div id="l"></div>
<div id="c"></div>
<div id="r"></div>
<!-- l & r are the left and right column colours only - they hold no content -->
</div>
<div id="footer">
<p>footer</p>
</div>
</body>
</html>
|
| |
| |
|
|
|
| |
|
|
| |
для: DJ Paltus
(29.03.2010 в 09:47)
| | | + из-за того что, боковые колонки с абсолютным позиционированием, у меня не получается прибить нормально футер, он оказывается под колонками и цепляется за нижнюю границу центральной колонки
+ в данном примере если содержание боковой колонки много, содержание вылазит из колонки :(
+ с другой стороны, если в центральном блоке много контента и он ниже боковых колонок, те остаются на месте и не растягиваются по высоте, зато футер нормально приклеивается
http://www.istroi37.ru/2.html
в моей примере проблема была только одна http://www.istroi37.ru/1.html | |
| |
|
|
