Форумы портала PHP.SU :: Версия для печати :: Два столбца, один фиксированный

1. ZekMan - 25 Июня, 2011 - 22:51:06 - перейти к сообщению

Проблема в том что нужно растянуть по высоте min-height: 100%; что собственно и не получается.

CODE (html):
скопировать код в буфер обмена

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>Kanifas redesing v1.3</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
</head>
<body>
        <div class="page">
                <div id="container">
                        <div id="content">
                                <strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
                        </div><!-- #content-->
                </div><!-- #container-->
                
                <div class="sidebar" id="sideRight">
                        <strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
                </div><!-- .sidebar#sideRight -->
        </div>
</body>
</html>

CODE (html):
скопировать код в буфер обмена

 
* {
        margin: 0;
        padding: 0;
}
html {
        height: 100%;
}
body {
        font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
        height: 100%;
        background-color:#999;
}
a {
        color: blue;
        outline: none;
        text-decoration: underline;
}
a:hover {
        text-decoration: none;
}
p {
        margin: 0 0 18px
}
img {
        border: none;
}
input {
        vertical-align: middle;
}
 
.page {
        min-width: 1000px;
        max-width: 1200px;
        margin: 0 auto;
        min-height: 100%;
        background-color:#FFF;
}
 
/*левая колонка*/
#container {
        width: 100%;
        float: left;
        background-color:green;
        position:relative;
        min-height:100%;
}
#content {
        padding: 0 200px 0 0;
        position:relative;
        background-color:red;
}
 
/* правая колонка */
#sideRight {
        float: left;
        width: 200px;
        margin-left: -200px;
        position: relative;
        background: #FFACAA;
        min-height:100%;
}
 
 