Сложный HTML / CSS макет

Question

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

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

Боковая панель и заголовок статические , как и тело, однако вы можете прокрутить тело. Использование переполнения свойства CSS: прокрутка контейнера для раздела body недоступна. Причина заключается в том, что это приложение ASP.NET, которое использует keeppositiononscrollback, а это означает, что полоса прокрутки browser , а не полоса прокрутки содержимого, - это то, что используется для записи позиций 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>

Так что я использую все эти div по определенной причине, чтобы я мог абсолютно точно позиционировать границы в области содержимого. Остальные элементы 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 чертовски много делает для чего-то очень простого.

РЕДАКТИРОВАТЬ : Этот макет не проблема вообще. Эта часть даже не сложная. Трудно поддерживать простой HTML / CSS со сложным макетом, и под сложным я не имею в виду то, чего не могу достичь. Я уже достиг желаемого эффекта, я просто ищу лучший способ сделать это.

РЕДАКТИРОВАТЬ : Это основано на бизнес-требованиях, у меня нет выбора:)

Answer 1

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

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

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

Answer 2

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

Надеюсь, это поможет

Answer 3

Я бы сделал это с position:fixed и соответствующими полями и шириной / высотой