3 столбца, фиксированный заголовок, фиксированные боковые панели, контент прокручиваемый

Question

Может ли кто-нибудь помочь мне со следующей компоновкой div? Я попробовал пару решений, однако, единственный способ, которым я смог это сделать, - использовать таблицы.

Я имел взгляд на Holy Grail 3 Column Layout, однако, это layoyt не 100% высоты, и заголовок не является фиксированным, я также необходимо только содержимое для прокрутки, боковые панели должна быть фиксированной высотой 100%

Answer 1

Кажется, ответы здесь игнорируют большинство ваших требований. Я наткнулся на это, потому что у меня проблема с рендерингом с той же макетой, что и после.Я раздвоенный скрипку выше, чтобы показать вам:

http://jsfiddle.net/RsRf9/2/

Основное различие заключается в том, что все тело прокручивать, а не только крошечная область в центре (я думаю, что это то, что вы после этого).

Помимо очистки стилей, которые ничего не делали (например, поплавки в то время как положение фиксировано), основным изменением является центральной седловине - все, что вам нужно нужно это:

.center{margin:100px 200px;} 

Другие изменения как вы получите, что эффект на боковых панелях «высота 100%» - мой фокус в том, чтобы сделать это:

.left,.right{width:200px;top: 100px; bottom: 0px;position: fixed;} 

Вместо высоты 100%, я просто сказать ему, чтобы простираться от топ-100 (в нижней части навигационной панели) внизу 0 (внизу страницы)

Это будет подталкивать содержимое ниже верхнего навигатора и между двумя фиксированными боковыми полосами.

Answer 2

Я использую таблицу стилей YUI grids для такого макета. Он проверен и проверен и работает в нескольких браузерах.

Answer 3

Я создал рабочую скрипку в соответствии с вашими требованиями:

Вот working fiddle - ОБНОВЛЕНО включить фиксированный заголовок ONLY TOP BAR фиксирована

Важно отметить, структурная схема дивы. .. обратите внимание, что .center является ПОСЛЕ .right

<div class='wrap'> 
    <div class='head'>Header</div> 
    <div class='bodywrap'> 
     <div class='left'>left</div> 
     <div class='right'>right</div> 
     <div class='center'>center center center center center center center center center center center center ... blah</div> 
    </div> 
</div> 

и КСС:

JUST HEADER FIX ED:

html,body{height:100%} 
.wrap{width:100%;height:100%;position:relative} 
.head{height:100px;position:fixed;top:0;left:0;width:100%} << UPDATED for fixed header 
.bodywrap{margin-top:100px;width:102%;margin-left:-1%} << UPDATED - Terrible hack and you may find something more elegant 
.left,.right{width:200px;height:100%} 
.left,.center,.right,.bodywrap{height:100%} 
.left{float:left;} 
.center{margin-left:200px; overflow:scroll; overflow-x:hidden;} 
.right{float:right;} 

.left{background-color:#aaa} 
.right{background-color:#ccc} 
.center{background-color:#444} 
.head{background-color:#777} 

ЗАГОЛОВОК И Sidebars FIXED (также был в состоянии исправить грязный хак для .left и .right занижение

html,body{height:100%} 
.wrap{width:100%;height:100%;position:relative} 
.head{height:100px;position:fixed;top:0;left:0;width:100%} 
.bodywrap{margin-top:100px;margin-left:-8px} 
.left,.right{width:200px;height:100%} 
.left,.center,.right,.bodywrap{height:100%} 
.left{float:left;position:fixed} 
.center{margin-left:200px; overflow:scroll; overflow-x:hidden;margin-right:191px} 
.right{position:fixed;right:0} 

.left{background-color:#aaa} 
.right{background-color:#ccc} 
.center{background-color:#444} 
.head{background-color:#777} 

Here is with top and sides fixed center scroll liquid center column (и нет пробелов на .left и .right)

Это основное использование поплавков, но структурная разметка является ключевой;)

Answer 4

Это на самом деле довольно легко сделать в рудиментарном смысле, вам не нужны таблицы (или табличная ячейка) bu t mix px и% могут быть проблематичными. Если вы придерживаетесь%, ваша страница будет в любом случае изменяться. Обработка проблем с перекрестным браузером требует немного более тонкой настройки CSS, но есть множество сетевых решений, в которых реализованы проверенные и проверенные решения даже для IE6, а фреймворки, такие как bootstrap Twitter, будут предлагать намного больше.

Другими словами, это решаемая проблема, но вот краткий пример того, как вы можете добраться туда вручную;

<div class="container"> 
<div class="header"> 
    header 
</div> 

<div class="left"> 
left 
</div> 

<div class="main"> 
    content 
</div> 

<div class="right"> 
    right 
</div> 
</div> 

И CSS;

html, body, .container 
{ 
height:100%; 
} 

.container 
{ 
background-color: pink; 
} 

.header 
{ 
background-color: yellow; 
height:50px; 
} 

.left 
{ 
background-color: red; 
float:left; 
width:10%; 
height:100%; 
overflow: hidden; 
} 

.right 
{ 
background-color: blue; 
float:left; 
width:10%; 
height:100%; 
overflow: hidden; 
} 

.main 
{ 
background-color:#fefefe; 
float:left; 
height:100%; 
width: 80%; 
overflow-y:scroll; 
} 

И конечно Fiddle

Использование% проклейки также позволит вам приблизиться к более адаптивный дизайн, который работает для планшета и мобильного телефона. Опять же, многие из структур сетки там «отзывчивы» в дизайне.

Answer 5

Вы можете использовать плагин scrollToFixed для содержимого левой и правой боковой панели с фиксированной и центральной колонкой только для прокрутки вверх и вниз. Для прокрутки демо используйте ссылку http://bigspotteddog.github.io/ScrollToFixed/

И еще одна вещь, использующая Bootstrap для дизайна UI. Включите Bootstrap CSS и JavaScript на странице колонтитула

<div class="container"> 
     <div class="col-md-12"> 
      <div class="col-md-3" id="left-sidebar"> 
       left-content 
      <div> 
      <div class="col-md-6" id="center"> 
       center content 
      </div> 
      <div class="col-md-3" id="right-sidebar"> 
       right-content 
      </div> 
     </div> 
    </div> 

Вы можете изменить в соответствии с вашими требованиями. Я просто даю вам общий намек.

Просто напишите ниже сценарий для прокрутки

$(document).ready(function(){ 
    $('#right-sidebar').scrollToFixed({ 
         marginTop: function() { 
          return 5; 
         }, 
         limit: function() { 
          return (
           $('#footer-widgets-bg').offset().top - $('#right-sidebar').outerHeight(true) 
          ); 
         }, 
         zIndex: 1, 
         removeOffsets: true 
        }); 
    });