html - '高度 :100%' is not working?

我在 website 工作标题和主菜单在左侧作为一列工作，而我在右侧有内容。

无论我做什么，我都无法让标题随着内容一起增长。出于某种原因， body 在某个时候卡住了，它不允许里面的 div 正常工作。

我尝试了我在整个网络上看到的所有内容:我正在处理相对位置，我认为所有容器的高度都为 100%

关于如何解决这个问题的任何想法？:(

如果这对您有帮助，您可以找到我的源代码。

html{
  height:100%;
}

body {
  margin: 0; 
  font-size: 1em; 
  line-height: 1.4; 
  font-family: Arial;
  height:100%
 }

a { 
  color: #6a6a6a; 
  text-decoration: none; 
}

a:hover {
  text-decoration: underline; 
}

a:hover, a:active { 
  outline: 0; 
}

p.copyright {
    padding: 0;
    margin: 0 0 0 7px;
    font-size: 0.9em;
}   

#container{
  height:100%;
}

div.main    {
    padding: 0 0 33px 0;
  width:75%;
  position:relative;
  float:right;
  height:100%;

}

.page-header    {
    background: #d60362;
    color: #fff;
    width: 20%;
  position:relative;
  float:left;
    padding: 12px 17px;
    top: 0;
    right: 0;
  height:100%;
}

.page-header h1 {
    margin: 0 0 4px 0;
    padding: 0;
    width: 260px;
    height: 110px;
  text-align: center;
}

.page-header h1 a   {
    display: block;
    width: 260px;
    height: 105px;
  font-size: 30px;
}

.strapline  {
    color: #3d3d3d;
    font-weight: bold;
    padding: 0;
    margin: 0 0 26px 0;
  text-align:center;
}

.page-header a  {
    color: #fff;
}
.page-header a:hover    {
    color: #3d3d3d;
  text-decoration:none;
}

#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-size: 14px;
  position: relative;
}
#cssmenu a {
  line-height: 1.3;
}
#cssmenu {
  width: 250px;
}
#cssmenu > ul > li > a {
  font-size: 25px;
  font-weight: bold;
  display: block;
  background: #d60362;
  color: #ffffff;
  border-bottom: 1px solid white;
  text-transform: uppercase;
}
#cssmenu > ul > li > a > span {
  background: #d60362;
  padding: 10px;
  display: block;
  font-size: 13px;
  font-weight: 300;
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;
}
#cssmenu > ul > li.active {
  border-bottom: none;
}
#cssmenu > ul > li.active > a {
  color: #fff;
}
#cssmenu > ul > li.active > a span {
  background: #83003C;
}
#cssmenu span.cnt {
  display:none;
}
/* Sub menu */
#cssmenu ul ul {
  display: none;
}
#cssmenu ul ul li {
  border: 1px solid #e0e0e0;
  border-top: 0;
}
#cssmenu ul ul a {
  padding: 10px;
  display: block;
  color: #d60362;
  font-size: 13px;
}
#cssmenu ul ul a:hover {
  color: #83003C;
}
#cssmenu ul ul li.odd {
  background: #f4f4f4;
}
#cssmenu ul ul li.even {
  background: #fff;
}

#posts{
  width:90%;
  margin:15px 20px 50px 50px;
  height:100%;
}

#posts h1{
  color:#d60362;
  line-height: 60px;
  text-align:center;
  margin-top:35px;
  border-bottom:2px solid #d60362;

}

#posts h2{
  color: #83003C;
}

#posts h3{
  color: #83003C;
  text-decoration:underline;
}

#posts h4{
  color: #83003C;
  font-style: italic;
}

#post-contenido{
  width:100%;
  height:100%;
  margin: 15px;
}

#wb_footer{
  height:50px;
  padding-top:20px;
}

#posts :after{
  width:100%;
  display:block;
  clear:both;
}

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Desarrollo de Aplicaciones Web | Programación</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="stylesheet" href="style.css">
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="script.js"></script>
</head>


<body>

  <div id="container">

    <header class="page-header">

      <h1>
        <a href="">Desarrollo de Aplicaciones Web</a>
      </h1>

      <p class="strapline">Programación</p>

      <div id='cssmenu'>
        <ul>
           <li class='active'><a href='#'><span>Indice</span></a></li>
           <li class='has-sub'><a href='#'><span>Identificación de los elementos de un programa informático</span></a></li>
           <li class='has-sub'><a href='#'><span>Utilización de objetos</span></a>

          </li>

          <li class='has-sub'><a href='#'><span>Uso de estructuras de control</span></a>

          </li>

          <li class='has-sub'><a href='#'><span>Desarrollo de clases</span></a>

          </li>

          <li class='has-sub'><a href='#'><span>Lectura y escritura de información</span></a>

          </li>

          <li class='has-sub'><a href='#'><span>Aplicación de las estructuras de almacenamiento</span></a>

          </li>

          <li class='has-sub'><a href='#'><span>Utilización avanzada de clases</span></a>

          </li>

          <li class='has-sub'><a href='#'><span>Mantenimiento de la persistencia de los objetos</span></a>

          </li>

          <li class='has-sub'><a href='#'><span>Gestión de bases de datos relacionales</span></a>

          </li>

          <li class='has-sub'><a href='#'><span>Ejercicios</span></a>

          </li>     
        </ul>
      </div>

    </header>

    <div role="main" class="main">

      <div id=posts>
        <h1>Desarrollo Web en entorno cliente</h1>

        <div id=post-contenido>
          <p>Hello World! LALALALALLALA</p>
        </div>

      </div>

      <div class="contenedor" id="wb_footer" style="background: transparent none repeat scroll left top;">

        <div id="footer" class="elementos">
            <p class="wb-stl-footer">© 2014 <a href="http://alumnodaw.esy.es">alumnodaw.esy.es</a></p>
        </div>

      </div>

    </div>


  </div>

</body>

</html>

最佳答案

一般来说，我发现 height:100% 没什么用，而且它也没有达到您的预期...

相反，我建议使用绝对定位。

我确实使用绝对定位重新创建了您的基本布局，以下是 HTML 模型:

<div id="container">
    <header class="page-header">
        <h1>Ejemplo de Pagina Web</h1>
        <p>Programación</p>
        <div id="cssmenu">
            <ul>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
            </ul>
        </div>
    </header>
    <div class="main">
        <div id="posts">
            <h1>Programación</h1>
            <div id="post-contenido">
                <p>Prueba aaaaaaaaaaaaaalalalallalalalallaa</p>
            </div>
            <div class="contenedor">
                <div id="footer">
                    <p>CC-BY theraot</p>
                </div>
            </div>
        </div>
    </div>
</div>

这是 CSS:

.page-header {
    position:absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 75%;
    background:#d60362;
    color:white;
}
.main {
    position:absolute;
    left: 25%;
    top: 0;
    bottom: 0;
    right: 0;
}
#footer {
    position:absolute;
    bottom: 0;
}

您可以在 this custom CodePen 看到它.

附录 1:

如果你想保持 footer 总是在页面底部的想法，你可能会想使用 .contenedor 而不是 # footer 为 CSS 选择器设置一个已知的高度(给 contenedor div)，这样你就可以给 posts div 一个已知的底部。另一方面，删除关于 footer 的部分，让它紧跟在 posts 之后。

附录 2:

如果您希望通过允许页眉位于页面其余部分的顶部来适应小视口(viewport)的布局(在这种情况下，所有高度问题都毫无意义，因为页眉不再并排与内容)然后我会建议使用媒体查询。

关于html - '高度 :100%' is not working?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27516540/

html - '高度 :100%' is not working?

上一篇：html - 如何在没有表格的情况下对齐文本

下一篇：javascript - 保存html网站中使用的图像，视频等商店资源的位置