Двухколоночный макет CSS с высотой жидкости 100%

#html #css

#HTML #css

Вопрос:

Это мой макет — я использую его для 2 страниц. Мне нужно быть полной высотой (100%) и гибкой высотой одновременно. Красный блок пуст, только заголовок / подзаголовок и полное изображение bg (обложка).

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

Я пробовал другие методы, но я не могу заставить это работать .. и я не хочу использовать чистый css2, основанный только на js.

Кто-нибудь может мне помочь? Спасибо.

1. Что вы пробовали? Пожалуйста, опубликуйте свой код, желательно с помощью jsfiddle. чистый или другой пример.

2. Это страница, как вы можете видеть, внизу справа идентификатор скрыт, и мне нужно прокрутить его ссылку

Ответ №1:

Одной из возможностей добиться того, чего вы хотите, было бы использовать display:table amp; display:table-cell :

 #content {
    width: 100%;
    display: table;
}

#left, #right {
    width: 50%;
    display: table-cell;
}

ДЕМОНСТРАЦИЯ

Вы также можете работать с. flex-box

Руководство по Flexbox

Ответ №2:

Это будет работать, если вы хотите изменить высоту .top и .bottom помните, что изменение значения var heighs это (.bottom .top) высота Java script (jquery)

 <script type="text/javascript" src="http://www.designerbh.com/index_files/jquery-1.9.1.min.js"></script>
<script>
setInterval(function(){
    var heights=$("body").height();
    var heights=heights-100;
    console.log(heights);
    $(".red ,.gray").css({'height':heights});
},100);
</script>

HTML

 <body style='margin:0px'>
<div class='top'>

</div>
<div class='red'>

</div>
<div class='gray'>

</div>

<div class='bottom'>

</div>
</body>

Css

 <style>
.top{
float:left;
width:100%;
height:50px;
background:black;
color:white;
}
.red{
float:left;
width:50%;
height:100%;
background:red;
}
.gray{
float:left;
width:50%;
height:100%;
background:#ccc;
}
.bottom{
float:left;
width:100%;
height:50px;
background:black;
color:white;
}
</style>

1. спасибо, но я сказал: «и я не хочу использовать чистый css только для js»

2. только с чистым css это будет невозможно, bootstrap использует js

3. js сделает сайт «отзывчивым», только если вы используете @media screen, но вам нужно создать стиль css для любого пикселя

Ответ №3:

Я просто рекомендую вам использовать Bootstrap, и вам не нужно беспокоиться — посмотрите их сетку getbootstrap.com