Сложная компоновка HTML/CSS

Question

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

---------------------------------------------------- 
    |      HEADER      | 
    ---------------------------------------------------- 
    ________ _______________________________________ 
    |  | |          | 
    |  | |          | 
    |  | |          | 
    |  | |          | 
    |  | |          | 
    |  | |          | 
    |  | |          | 
    |  | |          | 
    |________| |          | 
       |          | 
       |          | 
       |          | 
       |          | 
       |          | 
       |_______________________________________| 

Боковая панель и заголовок является статическим и поэтому тело, однако вы можете прокручивать тело. Использование переполнения свойства CSS: прокрутка по контейнеру для раздела тела не является вариантом. Причина в том, что это приложение ASP.NET, которое использует keeppositiononscrollback, что означает, что браузер полоса прокрутки - не содержит полосу прокрутки - это то, что используется для записи положения x и y. Я достиг этого, но используя некоторые сложные методы компоновки, которые просто не очень хороши.

Так что мой HTML выглядит следующим образом:

<div id="header"> 
    <ul> 
    <li><a href="/">Home</a></li> 
    <li><a href="#">Telephone</a></li> 
    <li><a href="#">My Department</a></li> 
    <li><a href="#">My Profile</a></li> 
    </ul> 
</div> 

<div id="sidebar-container"> 
    <div id="sidebar"> 
    <!-- sidebar code using ul's and li's --> 
    </div> 
</div> 

<div id="content-top-border"></div> 
<div id="content-left-border"></div> 

<div id="content-wrap"> 
    <div id="content"> 
    <asp:ContentPlaceHolder ID="MainContent" runat="server" /> 
    </div> 
</div> 

<div id="content-right-border"></div> 
<div id="content-bottom-border"></div> 
<div id="bottom-block"></div> 

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

Мой файл CSS слишком велик, чтобы разместить здесь, но вот общая идея:

div#header { 
    height:30px; 
    background-color:#d7d7d7; 
    position:fixed; 
    top:0; 
    left:0; 
    right:0; 
} 

div#sidebar { 
    position:fixed; 
    top:30px; 
    left:0; 
    overflow:auto; 
    bottom:4px; 
    width:148px; 
    background-color:#d7d7d7; 
} 

div#sidebar ul { 
    border:1px solid #9a9a9a; 
    border-bottom:0; 
    font-family:Tahoma; 
    margin:0 0 0 4px; 
    padding:0; 
    list-style-type:none; 
    font-size:0.75em; 
    width:137px; 
    clear:both; 
    background-color:white; 
} 

Так как вы можете видеть на боковой панели, я установил фиксированную ширину, сделать его position:fixed, а затем установите фон. Содержащая <ul> имеет фиксированную ширину, что вызывает блок. Когда вы горизонтально прокручиваете страницу, содержимое будет скрыто, когда оно попадет на боковую панель. Это создает эффект, похожий на любое клиентское приложение.

#content-wrap { 
    position: absolute; 
    top: 30px; 
    bottom: 15px; 
    left: 147px; 
    right:0; 
    background-color:#d7d7d7; 
    z-index:-998; 
} 

#content { 
    z-index:-995; 
    position:absolute; 
    top:0; 
    bottom:0; 
    right:0; 
    left:0; 
    padding:10px 10px 20px 10px; 
    background-color:#FFF; 
    color:#292929; 
} 

Таким образом, вы можете видеть, что #content имеет абсолютное позиционирование, сохраняя его в этом поле содержимого. Все, что находится вне поля содержимого, равно , никогда не отображается, даже если вы прокручиваете его по горизонтали или по вертикали.

Есть ли лучшие способы сделать это? Кажется, что HTML/CSS очень много делает что-то действительно очень простое.

EDIT: Этот макет не является проблемой вообще. Эта часть даже не сложна. Трудно поддерживать простой HTML/CSS со сложной компоновкой, и сложным я не имею в виду то, чего я не могу добиться. Я уже достиг желаемого эффекта, я просто ищу лучший способ сделать это.

EDIT: Это основано на бизнес-требованиях, у меня нет выбора :)

Answer 1

Неподвижных элементы позиции, как правило, немного предупреждающим знаком для меня-принимая вещи из поток документов вы теряете одно из основных преимуществ CSS, что является его гибкостью.Опять же, путем смешивания измерений px и em вы создаете слегка смешавшееся замятие стилей, которое не позволяет легко изменять размер страницы.

Однако центральная проблема, по-видимому, связана с вопросом о том, лабите ли вы правильное дерево с точки зрения подхода и результатов. У вас есть, чтобы использовать параметр maintainpositiononscrollback из ASP.NET? Было бы не слишком сложно реализовать немного легкого javascript, чтобы создать эквивалентный эффект для переполненного div. Если вы застряли в коде asp.net, у вас есть , у вас есть, чтобы ваш текст был в маленьком поле, например, или вы могли просто оставить страницу такой же, как и контент?

Если есть использовать maintainpositionscrollback и вы имеют иметь содержание в небольшой коробке вы могли бы быть лучше использовать некоторые меньше стандартов дружественный код для markup- возможно положить содержимое в плавающем фрейме будет дайте вам поведение, которое вы ищете. Если вы теряете большую часть преимуществ семантического html и css, чтобы реализовать дизайн, который вам нужен, вы не собираетесь жертвовать гораздо больше, применяя другой подход к дизайну.

Answer 2

Вы можете использовать разметку и CSS here и адаптировать его slighty к тому, что вам нужно?

Надеется, что это помогает

Answer 3

Я хотел бы сделать это с позицией: фиксированные и соответствующие поля и шириной/высота