Полоса прокрутки в блоке и его высота

NoItemName · May 3, 2013

Возникла проблема. Уже несколько дней пытаюсь найти ответ, но без результата.

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

Как указать высоту блока .content, чтоб он вытягивался до футера?


@charset "utf-8";
/* CSS Document */
* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -175px;
}
.footer, .push {
    clear: both;
    height: 175px;
}
.content{
    overflow-y: scroll;
    height: 200px;
}


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
  <div class="content">
    <p>qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
	  qwe текст<br>
    </p>
  </div>
  <div class="push"></div>
</div>
<div class="footer">
  <p>футер</p>
</div>
</body>
</html>

NoItemName · May 3, 2013

В общем, нашел решение. Автор некий pepelsbey.


<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<title></title>
<meta charset="UTF-8">
<style>
  BODY {
   overflow:hidden;
   padding:0;
   margin:0;
   }
  #header {
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:40px;
   background:#666;
   }
  #content {
   position:absolute;
   top:40px;
   bottom:40px;
   left:0;
   width:100%;
   overflow:auto;
   background:#CCC;
   }
  #footer {
   position:absolute;
   bottom:0;
   left:0;
   width:100%;
   height:40px;
   background:#666;
   }
</style>
</head>
<body>
<div id="header"></div>
<div id="content">
  …
</div>
<div id="footer"></div>
</body>
</html>

Sign In

Полоса прокрутки в блоке и его высота

Question

NoItemName

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

NoItemName

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information