Автоцентр с CSS с одним исключением - PullRequest
1 голос
/ 27 января 2010

У меня есть такой дизайн: альтернативный текст http://img15.imageshack.us/img15/8647/designiq.jpg

Весь мой автоцентрированный контент имеет следующий CSS:

width: 960px;
margin: 0px auto;

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

Как лучше всего сделать 100% -DIV?

position: absolute /* or fixed */ это не то, что я хочу иметь, потому что высота содержимого выше 100% -DIV не всегда одинакова.

Ответы [ 4 ]

2 голосов
/ 28 января 2010

Вот пример кода:

<html>
<head>
<title>Boxes</title>

<style type="text/css">
<!--

body {
    margin: 0;
    padding: 0;
}
* {
    margin: 0;
    padding: 0;
}

#wrapper {
    width: 100%;
    margin: 0 auto;
}
#wrapper div.width_960 {
    width: 960px;
    margin: 0 auto;
    border-left: 2px #000 solid;
    border-right: 2px #000 solid;
}
#wrapper div.width_full {
    width: 100%;
    background: #000;
}   

-->
</style>
</head>
<body>

<div id="wrapper">
    <div class="width_960">
        <p>demo</p>
        <p>demo</p>
        <p>demo</p>
        <p>demo</p>
        <p>demo</p>
    </div>
    <div class="width_full">
        <p>demo full</p>
        <p>demo full</p>
    </div>
    <div class="width_960">
        <p>demo</p>
        <p>demo</p>
        <p>demo</p>
        <p>demo</p>
        <p>demo</p>
    </div>
</div>

</body>
</html>
0 голосов
/ 28 января 2010

Вы не можете иметь элемент шире, чем его родитель. Вы должны положить это из потока. position:absolute кажется ответом, если вы не укажете верхнюю позицию, она займет свою позицию в потоке.

position:absolute;
width:100%;
left:0px;
0 голосов
/ 27 января 2010

Это неприятный уродливый трюк, но здесь - это один из способов, без какого-либо Javascript.

По сути, вы создаете отдельный абсолютно позиционированный элемент фона, размер которого соответствует любому возможному окну.

РЕДАКТИРОВАТЬ : исправлено для обработки нескольких строк.

div.FullWidth {
  position:relative;
}
div.FullWidth .Background{
  position: absolute;
  left:-2048px;
  z-index:-1;
  width: 4096px;
  height:100%;

  background:#999;
}
div.FullWidth .Content {
  text-align: center;
  font-size:larger;
  color: red;
}



<div class="FullWidth">
  <div class="Background">&nbsp;</div>
  <div class="Content">
    Hello!</div>
</div>
0 голосов
/ 27 января 2010

Установка ширины является односторонней в CSS; вы мгновенно теряете информацию о ширине родителя.

Короче говоря: Вы не можете переустановить div внутри ограниченного div в ширину окна с помощью только CSS . С JavaScript и при условии, что у родителя нет overflow:hidden, вы можете сделать это:

  • установить ширину дочернего элемента в window.innerWidth и
  • установить для левого и правого поля дочернего элемента значение - (window.innerWidth / 2 - parentDivs_width)

как, например, для размера окна 800px:

#parent {
  width: 300px;
  margin: 0 auto;
}

#child {
  /* set these with JS */
  width: 800px;
  margin: 0 -250px;
}

Более тривиальное решение состоит в том, чтобы переместить дочерний элемент div из его родителя и расположить его и родительский элемент с отрицательным верхним и нижним полями. (position:absolute не будет работать, потому что это то же самое, вы теряете информацию о ширине.)

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