Question

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

无论我做什么，我都无法使标题与内容一起成长。出于某种原因，身体在某些时候会卡住，并且不允许其内部的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>

Answer 1

一般来说，我发现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：

如果你想要一个适应小视图端口的布局，允许标题保持在页面的其余部分的顶部（在这种情况下，所有高度的问题都是没有意义的，因为标题不再是并排的随着内容）然后我建议使用媒体查询。

Answer 2

删除css类（.page-header）上的属性（宽度：20％;）。

Answer 3

高度100％表示调整高度以适应屏幕大小。由于您希望将其调整为内容的大小，因此在使用时应该小心。你也可以添加posifion：fixed; overflow-y：自动到标题会产生更好的结果

但是你会在制作响应时遇到问题，最小宽度是必须的。

看看http://getbootstrap.com/ 通过一些标签和课程，您可以制作美丽的响应式网站

'身高：100％'不起作用？

3 个答案: