2011-12-04 3 views
0

У меня есть код следующим образом:CSS расширить Div высоту страницы верхнего

<html> 
    <head> 
     <style type="text/css"> 
      #container { 
      } 
      #content { 
      } 
      a { 
       color:#0083cc; 
      } 
      body { 
       margin:0px; padding:0px; 
      } 
      #header { 
       height:20px; 
       background-color:#fb0000; 
      } 
      #section1 { 
       margin: 0 auto; 
       width: 50%; 
       border-style: none none solid solid; 
       border-width: 5px; 
       border-color: red; 
       margin-top: 100px; 
      } 
     </style> 

     <title></title> 
    </head> 

    <body> 
     <div id="container"> 
      <div id="header"></div> 

      <div id="content"> 
       <div style="float: left;"> 
        Test 
       </div> 
       <div id="section1"> 
        <div style="text-align:center;"> 
         <h1 style="color:#999999;">Please <a>Login</a> or <a>Signup</a></h1> 
        </div> 

       </div> 
      </div> 
     </div> 
    </body> 
</html> 

мне интересно, если это возможно, чтобы иметь границы, что # section1 имеет продолжать весь путь до дна #header ? Кроме того, было бы возможно, чтобы div, содержащий «тест», плавал так, чтобы он появился сразу слева от границы # content1?

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

Заранее благодарен!

Редактировать: На самом деле, то, что я ищу, очень похоже на текущий макет facebook. Просто проще. То, что может использоваться как ссылка, чтобы увидеть конечный результат.

ответ

1

Почему бы вам не задать padding-top: 100px; вместо margin-top: 100px; в вашем стиле # section1? Если вы хотите, чтобы тестовое содержимое отображалось ниже, вы можете достичь этого с помощью другого правила, например, например. #content div:first-child { margin-top: 100px; }.

+0

Doh. Модель коробки снова ударяет. Спасибо за это! –

Смежные вопросы