3 и 2 полных экрана (ширина и высота) макетов (CSS)

Мне было интересно, были ли какие-нибудь простые примеры, которые сделали следующие

    * A right and a left fixed column with a fluid center. 
      With full height and width and a header and footer.
    * A single left fixed column with a fluid content column 2. 
      With full height and width and a header and footer.
    * A single right fixed column with a fluid content column.
      With Full height and width and a header and footer.

Я пробовал некоторые методы (например, перечисленные в списке), но они казались очень сложными, и они использовали много div, или они просто не поддерживали дополнение.

Заранее спасибо

ОТВЕТЫ

Ответ 1

Примеры, найденные вами на alistapart.com, настолько сложны, насколько это необходимо, и каждый серьезный пример, который вы можете найти в этих макетах, поддерживает дополнение. Вы найдете (и уже нашли) много хороших примеров об этом в Интернете, просто потратите некоторое время, пытаясь понять их, и вы увидите, что они не так сложны, в конце концов.

Во всяком случае, у меня хороший демонстрационный макет, похожий на второй, который вы ищете, здесь: http://www.meiaweb.com/test/BMS_DM_NI/

В основном, html:

<body>
        <div id="head">
            <h1>Title</h1>
        </div>
        <div id="main">
            <div id="navigation">

               <!-- navigation content -->

            </div>

            <div id="content">
                <h2>Content Title</h2>
                <p>
                   <!-- main content here -->
                </p>
            </div>
        </div>
    </body>

И css:

html {
    overflow: auto;
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    width: 100%;
    height: 100%;
    line-height: 1.5em;
}

#head {
    height: 20px;
    background-color: #666;
    color: #AAA;
    padding: 20px 20px;
}


#navigation {
    width: 210px;
    padding: 20px 20px;
    background: #efefef;
    border: none;
    border-right: solid 1px #AAA;
    float: left;
    overflow: auto;
}

#content {
    margin-left: 250px;
    padding: 20px 20px;
}

Я думаю, что это достаточно просто, и он работает во всех современных браузерах.

Ответ 3

Я знаю, что это плохо, и я - семантический кодер сквозной (это не предназначено для рифмы), но я все еще использую одну таблицу макета для создания столбцов.

Почему? Он совместим и прост. Это не требует смехотворных CSS-хаков, которые едва сдерживают вещи (серьезно, float предназначены для типографии, а не для макета). Он отображается идентично в каждом браузере при текущем использовании. Это. Просто. Работает. Это семантический взлом, но иногда вы просто должны делать то, что должны делать.

Однако на горизонте есть свет. Табличные значения отображаемых значений для CSS делают столбцы с одинаковой высотой тривиальными, хотя они все равно могут нарушать порядок источника (вам все равно нужно, чтобы ваш левый столбец находился перед вашим центральным столбцом, даже если он является секцией навигации и должен приближаться к концу вашего кода страницы). IE8 и все браузеры, отличные от IE, поддерживают их уже.

CSS3 Grids и CSS3 Template Layout будут решать эту проблему должным образом, но они все еще довольно далеки от использования. Кодер может мечтать, правда, правильно?

Ответ 4

Вы также можете посмотреть Галочка макета - 40 примеров разметки столбцов двух и трех процентов и размера в формате fizxed.

Ответ 5

Я переработал свой шаблон шаблона, чтобы вы могли увидеть все три из ваших запрошенных форматов в действии.

Это решение для CSS, без использования таблиц. Я установил это так, чтобы боковые столбцы фиксировали ширину, верхний/нижний колонтитулы фиксированной высоты. Все остальное - жидкость.

Во всех современных браузерах, за исключением IE7, контент центрируется как по вертикали, так и по горизонтали. У IE7 есть проблемы с его коробкой. Я считаю, что IE8 решили.

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

Посмотрите на действие - Полноэкранный режим с тремя колонками

Я немного удивлен, что этот ответ не набрал ни единого голоса или не захватил щедрость. Он работает, его просто, и он выполняет все, о чем попросил ОП. О, хорошо.

CSS

DIV { text-align: center }
#h0, #f0 { float: left; clear: both }
#h1, #f1 { height: 100px; float: none; width: 800px } 
#l0 { float: left; clear: left; }
#c0, #r0 { float: left; clear: none }
#l1, #r1 { width: 150px }
#c1 { width: 500px }
#l1, #r1, #c1 { height: 350px }
#h0, #f0 { background-color: orange }
#l0 { background-color: red }
#r0 { background-color: blue }
#c0 { background-color: yellow }

#h1, #f1, #l1, #r1, #c1
{ display: table-cell; vertical-align: middle; }

HTML

<div id="h0"><div id="h1">
  header
</div></div>

<div id="l0"><div id="l1">
  left column
</div></div>

<div id="c0"><div id="c1">
  <img alt="dilbert (3K)" src="../gif/dilbert.gif" height="82" width="80" />
</div></div>

<div id="r0"><div id="r1">
  right column
</div></div>

<div id="f0"><div id="f1">
  footer
</div></div>

Ответ 8

Я нашел Liquid two column layout в Floatutorial чрезвычайно полезен при настройке полноразмерной раскладки двух столбцов - фиксированный левый столбец с эластичным правый столбец с заголовком и ногой для загрузки. В их примере они предлагают, чтобы левый столбец использовался в качестве навигации, но это могло быть что угодно.

С помощью Floatutorial вы получите не только образец HTML-структуры и CSS, но, когда все будет готово, вы поймете, почему у вас есть то, что у вас получилось.

Я кратко попробовал YUI: Grids builder, как предложил @JohannesH, и имел некоторые небольшие проблемы с ним, но самая худшая проблема в том, что это было настолько запутанно, что я понятия не имел, почему это не работает, или почему это должно было быть сделано.

Изменить: там также учебник для жидкого трехстрочного макета (который я не использовал), а также целый набор других учебных пособий, в которых используются поплавки.

Ответ 9

В ответ на сообщение с оригинального плаката здесь, как бы я сделал первый запрос с таблицей < table (остальные тривиальные модификации):

<style>
body {
    height: 100%;
}

#container {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
}

#top, #left, #center, #right, #bottom {
    border: 1px solid black;
    text-align: center;
    vertical-align: center;
}

#left, #right {
    width: 200px;
}

#top, #bottom {
    height: 200px;
}
</style>

<table id="container">
    <tr>
        <td colspan=3 id="top">header</td>
    </tr>
    <tr>
        <td id="left">left</td>
        <td id="center">center</td>
        <td id="right">right</td>
    </tr>
    <tr>
        <td colspan=3 id="bottom">footer</td>
    </tr>
</table>

Ответ 10

Существует предварительная система css grid, основанная на Золотом правиле, и довольно легко реализует все типы форматов столбцов. Проверьте 960 Grid System. Вы можете выполнять свои цели без использования таблиц. Самое приятное, что с помощью чистого CSS-решения вы можете быстрее изменить свой макет.

Существует также реализация jQuery liquid, в которой есть интересный макет.