CSS-макет с фиксированными и жидкими столбцами

У меня возникла проблема с созданием макета, который является частично жидким. Макет должен иметь ширину и высоту 100%, но у него не должно быть полос прокрутки (overflow: hidden;).CSS-макет с фиксированными и жидкими столбцами

enter image description here

На картинке показано, что я пытаюсь добиться. Как вы можете видеть:

Заголовок должен быть исправлен - 110px со 100% шириной.
Два divs, завернутые через контейнер div. Синяя должна быть с фиксированной шириной 130px & 100% высота, а зеленая должна быть с шириной жидкости и высотой 100%.

Вот мой текущий код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
     * { 
      padding: 0; 
      margin: 0px; 
      color: white; 
     } 
     html, body { 
      height: 100%; 
      width: 100%; 
     } 

     .spacer { 
      clear: both; 
     } 

     #header { 
      background: black; 
      width: 100%; 
      height: 100px; 
      float: left; 
     } 

     #content { 
      height: 88%; 
      width: 100%; 
      padding: 0px; 
      margin: 0px; 
      position: relative; 
     } 

     #left { 
      background: #1664a0; 
      height: 100%; 
      width: 100px; 
      float: left; 
     } 

     #right { 
      background: #4aa016; 
      height: 100%; 
      float: left; 
      width: 91%; 
     } 

    </style> 
</head> 
<body> 

<div id="header"> 
    My Header 
</div> 
<div class="spacer"></div> 
<div id="content"> 
    <div id="left">Left container</div> 
    <div id="right">Right container</div> 
</div> 

</body> 
</html>

Есть несколько проблем с этим кодом:

Это не работает на различных разрешениях (800x600,1024x768, 1280x1024 и и т. д.)
Разделение контента не всегда заполняет страницу до конца.
Зеленый div будет идти ниже синего, если вы измените размер страницы, чтобы уменьшить разрешение.

Я предполагаю, что я мог бы делать что-то Жутко здесь не так, но я не дизайнер, так там кто-то, кто мог бы указать мне на «правильный путь» решения этой проблемы?

источник

2012-04-19 tftd

Почему вы 'плаваете'' 'header' ??? –

Посмотрите здесь http://jsfiddle.net/bmqPV/2/

у вас есть левый набор на 100px и право на 91%, так что если 100px больше, чем 9% будет перейти к следующей строке.

EDIT, вот новая скрипка http://jsfiddle.net/bmqPV/4/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
     * { 
      padding: 0; 
      margin: 0px; 
      color: white; 
     } 
     html, body { 
      height: 100%; 
      width: 100%; 
     } 

     .spacer { 
      clear: both; 
     } 

     #header { 
      background: black; 
      width: 100%; 
      height: 100px; 
      position: absolute; 
      top: 0px; 
      left: 0px; 
      z-index:3; 
     } 

     #content { 
      height: 100%; 
      width: 100%; 
      padding: 0; 
      margin: 0px; 
      position: relative; 
     } 

     #left { 
      background: #1664a0; 
      height: 100%; 
      width: 100px; 
      float: left; 
     } 

     #right { 
      background: #4aa016; 
      height: 100%; 
      width: 100%; 
     } 
     #wrapper 
     { 
      position: relative; 
      height: 100%; 
      width: 100%;} 
     .contentcontainer { 
      padding-top:100px; 
     } 
    </style> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="header"> 
     My Header 
    </div> 
    <div id="content"> 
     <div id="left"> 
      <div class="contentcontainer">Left container</div> 
     </div> 
     <div id="right"> 
      <div class="contentcontainer">Right container</div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

источник

2012-04-19 23:47:09 user1289347

Что-то не так с вашей правой колонкой .. – Alerty

ya Я обновил его в firebug не в скрипке, поэтому мне пришлось перестроить, извините – user1289347

Wow !! Благодаря! Это исправляет проблему с правильным столбцом! Есть ли способ удалить полосу прокрутки, которая появляется при изменении размера, чтобы уменьшить разрешение? Я уверен, что это происходит из-за '#content {height: 88%;}', но я не могу понять, как установить '# content' для заполнения страницы иначе? – tftd

Вы можете добиться результата с помощью простой CSS с определением позиций в #content & #right для лучшего понимания см простой код: -

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
{ 
      padding: 0; 
      margin: 0px; 
      color: white; 
     } 
     html, body { 
      height: 100%; 
      width: 100%; 
     } 


     #header { 
      background: black; 
      height: 100px; 
     } 

     #content { 
      width:100%; 
      border:5px solid red; 
      overflow:hidden; 
      position:relative; 

     } 

     #left { 
      background: #1664a0; 
      height: 100%; 
      width: 130px; 
      float: left; 
     } 

     #right { 
      background: #4aa016; 
      height: 100%; 
      float: left; 
      width:100%; 
      position:absolute; 
      margin-left:130px; 
     } 

</style> 
</head> 
<body> 
<div id="header"> 
    My Header 
</div> 

<div id="content"> 
    <div id="left">Left container</div> 
    <div id="right">Right container</div> 
</div> 

</body> 
</html>

см. th e demo: -http://jsbin.com/ajasey/17/edit

источник

2012-04-20 05:07:25

CSS-макет с фиксированными и жидкими столбцами

ответ

Смежные вопросы