'height: 100%' не работает?

Я работаю в website с заголовком, а главное меню работает как столбец с левой стороны, а у меня есть содержимое с правой стороны.'height: 100%' не работает?

Независимо от того, что я делаю, я не могу заставить заголовок расти с содержанием. По какой-то причине тело застряло в какой-то момент, и это не позволит работать в нем.

Я попробовал все, что я мог видеть по всей сети: я работаю с относительными позициями, и я думаю, что все контейнеры имеют высоту: 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>

источник

2014-12-17 Alison Lopez

Высота 100% обычно соответствует 100% окна окна просмотра, она не будет охватывать весь контент так, как вы надеетесь. Кроме того, вам, вероятно, не нужны все эти поплавки. Вы можете попытаться использовать фиксированную (или абсолютную) позицию на левой стороне с высотой: 100%, и она останется на 100% от области просмотра. Поскольку это также помечено как jQuery, вы можете получить высоту содержимого и установить левую сторону - или создать фоновое изображение розовой полоски и установить это на теле. Также проверьте это: http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm –

Это своего рода tl; dr. Разделение этого на короткий * пример, демонстрирующий вашу проблему, облегчит людям помощь, увеличит вероятность того, что они действительно помогут вам, и сделайте ваш вопрос более полезным для будущих посетителей. Вы также можете обнаружить, что в процессе создания минимального примера у вас есть прорыв и вы поймете свою проблему. –

@JoshuaChavanne Спасибо за ваш ответ! Я изначально планировал использовать фиксированный заголовок, но поскольку мое меню слишком велико, я нахожу очень проблематичным использование этого ... Я пытался с переполнением-y, но мне не очень нравится, как это выглядит, хотя проблема по-видимому ушла. –

В общих чертах я нахожу 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), поэтому вы можете дать известное дно в div posts. С другой стороны, удалите часть об footer, и пусть это будет сразу после posts.

Добавление 2:

Если вы хотите макет, который будет адаптироваться к малым портам зрения, позволяя заголовок, чтобы остаться на вершине остальной части страницы (в которой условие вся материя высоты не имеет смысла, так как заголовок уже не бок о бок с содержимым), то я бы предложил использовать медиа-запросы.

источник

2014-12-17 01:21:37 Theraot

Спасибо, ваш ответ действительно помог мне ... Вы пропустили только одну вещь для работы: мне нужно было дать моему # контейнеру абсолютную позицию ... с этим и вашим решением я решил свою проблему :) –

-1

Удалить свойство (ширина: 20%;). на сСт s class (.page-header).

источник

2014-12-17 00:47:55

-1

высота 100% означает регулировку размера экрана до размера экрана. Поскольку вы хотите настроить его на размер содержимого, вы должны быть осторожны при его использовании. вы также можете добавить posifion: fixed; overflow-y: авто в заголовок дает лучший результат

Но у вас возникнут проблемы с тем, что такая гибкая, минимальная ширина должна быть такой.

взглянуть на http://getbootstrap.com/ с несколькими тегами и классов, которые вы можете сделать красивые адаптивные сайты

источник

2014-12-17 00:50:19 Brett

'height: 100%' не работает?

ответ

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