Страница обрезана по центру - PullRequest
Новая
       12

Страница обрезана по центру

2 голосов
/ 23 марта 2011

На моем сайте есть центр и правая колонка.Центральный и правый столбцы окружены элементом <div> с id = wrap.Окружающий элемент div центрируется с использованием следующей техники CSS: 

#wrap{
  position:absolute;
  left:50%;
  margin-left:-307px; /* 307px = half of 594px(width of #center_column) */
}

. Это прекрасно работает, за исключением того, что когда размер браузера меньше ширины окружающего элемента <div>, тогда левая частьстраница обрезана и не может быть просмотрена путем горизонтальной прокруткиimage

Ответы [ 2 ]

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

Вы можете попытаться указать тело или общую обертку, если у вас есть один min-width центральный столбец (594px) + 2 x ширина правого столбца

Проблема в том, что с абсолютно позиционированным макетом страница фактически не знает, что div-ы существуют, они как пост-заметки, застрявшие на экране, поэтому вы должны дать ему что-то "реальное", чтобы прокрутить до

[Update]

Я не совсем уверен, как вы делаете позиционирование, но вам вообще не нужно [абсолютно] позиционировать центральный столбец, тогда вы можете использовать метод центрирования margin: 0 auto;. правый столбец внутри центрированного столбца внизу и расположите правый столбец вправо. Затем экран сохраняет ваш макет по центру и прокручивается, если правая боковая панель закрывается над 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
 "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title> Centered with right Sidebar </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="/" type="text/css" media="screen" charset="utf-8">
<style type="text/css" media="screen">
#wrap{
width: 594px; /* width of center column only */
margin: 0 auto;
position: relative;
border: 3px solid #eee;
height: 400px /* demo only add content for real height */
}

#rightcol {
position: absolute;
right: -260px; /* adjust to suit allowing for borders */
bottom: 0;
border: 3px solid #ff0;
width: 250px;
height: 300px /* demo only */
}

</style>
</head>
<body>
<div id="wrap">
 <div id="content">
    <h1>HTML Ipsum Presents</h1>
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

    <div id="rightcol">Right sidebar</div>
 </div>
</div>
</body>
</html>
0 голосов
/ 23 марта 2011

другая техника в центре: 

#wrap {
  width: 614px ;
  margin-left: auto ;
  margin-right: auto ;
}

и div всегда будет виден или прокручиваться при изменении размера браузера.

...