CSS-макет с полноразмерной левой панелью навигации и заголовком - PullRequest
Новая
       12

CSS-макет с полноразмерной левой панелью навигации и заголовком

6 голосов
/ 11 августа 2010

Я хотел бы иметь следующий макет 

+++++++++++++++++++++++
+Header               +
+++++++++++++++++++++++
+Nav+                 +
+   +                 +
+   +                 +
+   +      Content    +
+   +                 +
+++++++++++++++++++++++

, поэтому в основном макет из двух столбцов с заголовком.Я проверил много генераторов макетов CSS в сети, но они просто дали мне результат, когда левая панель навигации такая же большая, как и содержимое в ней.Я могу масштабировать его с помощью «height: 500px» или чего-то еще, но я хочу, чтобы он всегда был полноразмерным (сверху вниз в окне браузера).Изменение значения с помощью «height: 100%» не работает.Если вы хотите попробовать сами: http://guidefordesign.com/css_generator.php, а затем выберите полную страницу, макет из двух столбцов с заголовком, чтобы понять, что я имею в виду.Если вы хотите, вы можете сказать мне, какое свойство мне нужно настроить в сгенерированном файле CSS, чтобы оно работало

Ответы [ 4 ]

7 голосов
/ 11 августа 2010

Вы можете попробовать это.Он работает в браузерах, которые я тестировал (Firefox, IE7 + 8, Opera, Safari, Chrome).Просто поиграйте с процентными единицами для заголовка и столбцов. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>for stackoverflow</title>
  <style>
    body, html {
        padding : 0px;
        margin : 0px;
        height : 100%;
    } 

    #wrapper {
        width:900px;
        height:100%;
        margin: 0px;
        padding: 0px;
    }

    #header {
        height:10%;
        background-color:#930;
        width:900px;
    }

    #nav {
        background-color:#999;
        width:200px;
        height:90%;
        float:left;
    }

    #content {
        height:90%;
        background-color:#363;
        width:700px;
        float:left;
    }
  </style>
</head>

<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="nav"></div>
    <div id="content"></div>
</div>
</body>
0 голосов
/ 11 августа 2010

Небольшой общий ответ: посмотрите на CSS-фреймворки, например http://www.blueprintcss.org/ - они позволяют вам определять сетки.

Вот пример страницы: http://www.blueprintcss.org/tests/parts/sample.html

Относительно проблемы высоты , попробуйте это (должно постоянно давать вам 100% высоты окна браузера для вашего div): 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Test Page</title>
    <style type="text/css">
    body {
        padding: 0px;
    }
    .Container {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
        background-color: #123456;
        color: black;
    }
    </style>
</head>
<body>
    <div class="Container">
    </div>
</body>
</html>
0 голосов
/ 11 августа 2010

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

0 голосов
/ 11 августа 2010

Возможно, вы захотите взглянуть на эту идею и получить ее от:

См.демо здесь.

...