Позиция css: исправлено переполнение: авто - PullRequest
Новая
       1

Позиция css: исправлено переполнение: авто

1 голос
/ 13 января 2011

Я хочу поместить div внизу страницы и установить его ширину 960px, в центре страницы минимальное расстояние до левой границы составляет 170px. это мой код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
</head>
<style type="text/css">
body{width:100%;height:100%;}
*{padding:0;margin:0;}
#wrap{position:fixed;margin:0 auto;margin-left:170px;width:960px;overflow:auto;bottom:0;height:100px;}
</style>
<body>
<div id="wrap">
test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test
</div>
</body>
</html>

Но если ширина экрана равна 1024, div#wrap не имеет прокрутки и правая часть не отображается. Как мне это исправить?

Ответы [ 2 ]

2 голосов
/ 13 января 2011

Мне кажется, я понял вопрос, но мне все еще не ясно, что вы пытаетесь построить.

Вам следует изменить 

position : fixed;

на: 

position : absolute;

Это устраняет проблемы с прокруткой.

.,.

* примечание: я также думаю, что вы можете удалить 

overflow: auto;

Кроме того, измените: 

body{ width:100%;height:100%; }

на: 

html, body{ 
    width:100%; 
    min-height: 100%;
    height: auto !important;        
    height:100%; 
}
0 голосов
/ 13 января 2011

Ваш div обрезается, потому что вы выровняли его по нижней части окна браузера, а затем добавили левое поле, выталкивая div за пределы окна. Переполнение не поможет с этим, так как это не содержимое, которое выталкивается за пределы div, а весь сам div.

Если вы пытаетесь создать нижний колонтитул, который находится внизу страницы, делайте то, что предлагает Джулиан, и абсолютно позиционируйте ваш div (но опять же будьте осторожны с полями), и обязательно обратите внимание, что позиционированный div будет позиционироваться относительно следующего родителя с помощью «position: относительный» или, если ничего не найдено, html-элемент.

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

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

...