Полноэкранные макеты с 3 и 2 столбцами (ширина и высота) (CSS) - PullRequest
10 голосов
/ 22 февраля 2009

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

    * 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.

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

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

Ответы [ 12 ]

14 голосов
/ 22 февраля 2009
7 голосов
/ 24 марта 2009

Примеры, которые вы нашли на 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;
}

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

7 голосов
/ 23 февраля 2009

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

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

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

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

4 голосов
/ 18 марта 2009

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

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

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

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

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

Я немного удивлен, что этот ответ не набрал ни одного голоса и не получил награду. Это работает, это просто, и это выполняет все, что запросил OP. Ну хорошо.

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>
4 голосов
/ 22 февраля 2009

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

2 голосов
/ 22 февраля 2009

Взгляните на Yahoo YUI: построитель сеток .

2 голосов
/ 22 февраля 2009

http://www.alistapart.com/articles/holygrail

Это должно быть именно то, что вам нужно.

1 голос
/ 22 февраля 2009

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

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

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

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

0 голосов
/ 09 октября 2009

вы должны проверить Elastic CSS Framework:

http://elasticss.com/two-columns-based-layout/

Приветствие.

0 голосов
/ 23 марта 2009

Это должно иметь все, что вам нужно:

http://maxdesign.com.au/presentation/page_layouts/

И более общее решение всех ваших проблем с CSS:

http://www.blueprintcss.org/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...