компоновка css: высота 100% div (также больше div внутри) с двумя divws фиксированной высоты - PullRequest
Новая
       9

компоновка css: высота 100% div (также больше div внутри) с двумя divws фиксированной высоты

1 голос
/ 18 декабря 2009

Вот код HTML: 

   <div id="header">
   </div>
   <div id="container">
        <div id="leftbar">
        </div>
        <div id="content">
        </div>
   </div>
   <div id="footer">
   </div>

И вот чего я хочу достичь, даже если это не правильный CSS, но я думаю, вы поймете мою мысль: 

    html,body
   {
     min-width:800px;
     max-width:1680px;
     width:100%;
     height:100%
   }
   #header
   {
     width:100%;
     height:100px;
     background:#CCCCCC url(images/header_bg.gif) repeat-x; 
   }
   #footer
  {
   width:100%;
   height:10px;
  }
  #container
  {
   width:100%;
   height:100%-100px-10px;   /* I want #container to take all the screen height left */
  }
  #leftbar  /*fixed width, the height is always the same as the screen height*/
  {
    height:100%;
    width:200px;
  }
  #content
  {
    height:100%;
    width:100%-200px;  /* take all the screen width left except the leftbar */
    overflow:auto;
  }

Кто-то просто привел это в качестве примера: http://limpid.nl/lab/css/fixed/header-and-footer

Я не думаю, что использование <body>padding для исключения верхнего и нижнего колонтитулов является хорошим способом, потому что я хотел бы, чтобы все полосы прокрутки отображались внутри содержимого div #, а не для всего тега <body>.

Ответы [ 4 ]

1 голос
/ 18 декабря 2009

Нормальная ширина элемента блока равна 100%, поэтому все, что вам нужно сделать, это добавить соответствующее поле. Если я правильно понимаю ваш вопрос.

0 голосов
/ 15 апреля 2015

Вы можете использовать calc(), например ::

#container {
    ...
    height: calc(100% - 100px - 10px);
}

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

Что касается полос прокрутки, просто примените overflow: hidden к body и div#container и примените overflow: auto к div#content.

0 голосов
/ 18 декабря 2009

горизонтальный бит может быть достигнут довольно легко 

#content {margin-left:200px;}
#left-bar {float-left;width:100px;}

Вертикальный бит хитрее, поскольку нет вертикального эквивалента с плавающей точкой Точное приближение, которое может сработать: 

html,body
{
     min-width:800px;
     max-width:1680px;
     width:100%;
     height:100%
   }
   #header
   {
     width:100%;
     height:100px;
     background:#CCCCCC url(images/header_bg.gif) repeat-x;
     position:absolute; 
    top:0;
    left:0;

   }
   #footer
  {
   width:100%;
   height:10px;
     position:absolute; 
    bottom:0;
    left:0;
  }
  #container
  {
   width:100%;
   height:100%;
   margin-top:100px;
   margin-bottom:10px;
  }
  #leftbar
  {
    height:100%;
    width:200px;
    float:left;

  }
  #content
  {
    height:100%;
    margin-left:200px;
    overflow:auto;
  }
0 голосов
/ 18 декабря 2009

Рассматривали ли вы использование position: fixed для элементов каркаса? Или вы застряли, поддерживая IE6?

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

Нет похожих вопросов

...