Фиксированное нижнее поле - PullRequest
Новая
       2

Фиксированное нижнее поле

1 голос
/ 23 марта 2012

У меня есть такая страница: 

<html>
<head>
<style type="text/css">
  #mainDiv{
  height: 100%;
  }

  #myDiv{
  overflow: auto;
  width: 400px;
  }
</style>
</head>
<body>
  <div id="mainDiv">
  <div id="myDiv">content</div>
  </div>
</body>
</html>

Хотелось бы, чтобы mainDiv целиком содержался на экране (без полос прокрутки). Этот div содержит myDiv и myDiv, высота которых зависит от высоты экрана таким образом, что его нижняя граница имеет отступ в 30px от нижней части экрана (или mainDiv bottom). Что я могу сделать?

Ответы [ 3 ]

1 голос
/ 23 марта 2012

Вы можете попробовать: 

#mainDiv { width: 100%; height: 100%; padding-bottom: 30px; }
#mydiv { width: 100%; height: 100%; }

Заполнение #mainDiv должно дать эффективный запас, на который вы надеетесь на #mydiv.

Чтобы убедиться в отсутствии полос прокрутки, вам, возможно, придется удалить отступы и т. Д. С body.

1 голос
/ 24 марта 2012

Как @Johno предложил, решение должно быть 

#mainDiv { width: 100%; height: 100%; padding-bottom: 30px; }
#mydiv { width: 100%; height: 100%; }

, но когда вы попробуете это решение, вы получите полосу прокрутки, потому что высота содержимого больше, чем у окна.это потому, что я думаю, что поле добавляется к высоте содержимого (то есть 100%).Таким образом, порядок оценки правил:

  1. Установите высоту содержимого на 100%
  2. Добавьте границу 30 пикселей к текущей высоте.

Я попытался установить фиксированную высоту содержимого, то есть высоту окна минус 30 пикселей, и получил правильный результат.

1 голос
/ 23 марта 2012 
#mainDiv {
   width: 100%;
   height: 100%;
}
#mydiv {
  width: 100%;
  height: 100%;
  margin-bottom: 30px;
}

HTML 

   <div id="mainDiv">
       <div id="mydiv">content</div>
  </div>
...