Как я могу сделать свой контент на 100% высотой?

Просто простая структура. Попытка сделать мою обертку содержимого левой и правой границей и растянуть высоту 100%. Кажется простым, но не работает. Я что-то упускаю?Как я могу сделать свой контент на 100% высотой?

<?php get_header(); ?> 
    <div class="content_wrapper clearfix"> 
    </div> 
<?php get_footer(); ?>

// Заголовочный

<body <?php body_class(); ?>> 
     <div class="header clearfix"> 
      <div class="header_wrapper clearfix"> 
       <div class="logo_wrapper"> 
        <div class="logo"> 
        </div> 
       </div> 
      </div> 
     </div>

// FOOTER

 <?php wp_footer(); ?> 
    </body> 


</html>

// CSS

body { 
width:100%; 
height:100%; 
line-height: 1; 
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-weight:300; 
} 
.content_wrapper { 
width:960px; 
height:100%; 
margin:0px auto 0px auto; 
border-left:1px #ccc solid; 
border-right:1px #ccc solid; 
} 

.header { 
width:100%; 
height:80px; 
background:#FFF; 
border-bottom:1px #ccc solid; 
} 
.header_wrapper { 
width:960px; 
margin:0px auto 0px auto; 
height:80px; 
border-left:1px #ccc solid; 
border-right:1px #ccc solid; 
} 
.logo_wrapper { 
width:187px; 
height:63px; 
padding-top:8px; 
} 
.logo { 
width:187px; 
height:63px; 
background:url(../images/bit_ball_ai.png) no-repeat; 
margin-left:20px; 
}

благодаря

источник

2013-05-19 LightningWrist

Когда говорят у вы хотите содержание 100% вы говорите, вы хотите, чтобы это выглядело как HTTP: // mokker. azurewebsites.net/, где верхний и нижний колонтитулы находятся сверху и снизу с полным содержанием/фоном в середине или вы хотите, чтобы контент фактически составлял 100%. Я спрашиваю, потому что 100% -ная высота содержимого с верхним и нижним колонтитулом даст вам полосы прокрутки, поскольку этот контент фактически займет 100% окна просмотра. Надеюсь, я здесь. – origin1tech

@ C.Hazleton no. Просто попробуйте создать центрированную область содержимого 960px, которая составляет 100% высоты браузера с левой и правой границами, поэтому похоже, что есть боковые панели. Как левая и правая боковые панели и контент в середине – LightningWrist

Вот безошибочный способ сделать что-то 100% рост:

#element { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
}

Это сделает его заполнить все доступное пространство, но если оно должно быть относительным или статически позиционируется, вы могли бы сделать, как вы делаете:

#element { 
    min-height: 100%; 
}

Если это не работает, это связано с тем, что один из родительских элементов не является высотой 100%. От взгляда на ваш HTML кажется, что единственными родительскими элементами являются HTML и BODY, но вы определяете только 100% -ную высоту на BODY, которая по-прежнему будет ограничена HTML. Так что следующий шаг будет убедиться, что ваш HTML и BODY элементы оба имеют высоту 100%:

html, body { 
    height: 100%; 
} 

html > body > #element { 
    height: 100%; 
    /* more styles */ 
}

источник

2013-05-19 20:36:36 alt

Как я могу сделать свой контент на 100% высотой?

ответ

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