Как установить значение высоты div динамически?

0

У меня есть HTML-страница и включает в себя 3 div: Link

<div style="min-height:100%;">
        <div id="TopContent" style="display: inline-block; height: 100px; width: 100%; background-color: #CCDEBB;">
        </div>

        <div id="LeftContent" style="display: inline-block; width: 25%; border: 3px solid #DFE8F6;">

                </div>             

        <div id="RightContent" style="border: 3px solid #b8cfee; display: inline-block; float: right; width: 72%;">


        </div>

            </div>

Я хочу установить значение высоты LeftContent и RightContent в соответствии со значением высоты страницы. Я имею в виду, что LeftContent и RightContent height расширяют конец страницы.

Теги:

7 ответов

1

Я предлагаю вам использовать классы вместо id.

HTML

<div class="content top"></div>
<div class="content left"></div>
<div class="content right"></div>

CSS

*{
  height:100%;
  width:100%;
  margin:0;
} /* instead of HTML and BODY attributes */

.content{
  display:inline-block;
  margin-right:-4px; /*to margin left div with the right one!*/
  margin-top:-4px; /*to margin left and right divs with the top one!*/
}

.left{
  height:calc(100% - 200px); /*use calc(100% - "top div height" */
  width:50%; /*choose your own width*/
  background-color:red;
}

.right {
  height: calc(100% - 200px); /*use calc(100% - "top div height" */
  width:50%; /*choose your own width*/
  background-color:green;
}

.top{
  width:100%;
  height:200px;
  background-color:blue;
}

Надеюсь, это поможет вам! (подробнее см. http://codepen.io/utopy/pen/zcyti)

Поделиться
1

Используйте calc();

#LeftContent{
float:left;
margin-right:3px;
height:calc(100% - 100px); //-100px because height of top bar is 100px

}

для правого содержимого

Поделиться
1

Вы не можете контролировать высоту с помощью этого HTML, но вы можете эмулировать этот эффект с помощью: before/: after elements:

#LeftContent:after,
#RightContent:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:9999px;
    z-index:-1;
    background:#DFE8F6;
}
#RightContent:after{background:#b8cfee;}

http://jsfiddle.net/EhnhZ/

Поделиться
0

Я построил свой ответ, используя ответ из этого вопроса

<style>
    html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
</style>

<div style="min-height:100%;height:100%;">
    <div id="TopContent" style="height: 100px; width: 100%; background-color: #CCDEBB;">
    </div>

    <div id="LeftContent" style="min-height:100%;width: 25%; border: 3px solid #DFE8F6;float:left">    
    </div>             

    <div id="RightContent" style="min-height:100%;border: 3px solid #b8cfee; width:72%;float:right">
    </div>
</div>
Поделиться
  • 0
    С этим HTML у вас есть вертикальная прокрутка. Это неверно. И если вы добавляете содержимое каждого блока, высота parrent div (<div style = "min-height: 100%; height: 100%;">) не изменится. Если использовать backgrond для этого div, он не растягивается. jsfiddle.net/YDtgU ... Это ужасный ответ и неправильная реализация
  • 0
    @ Вертикальная прокрутка соответствует заданному OP («Высота LeftContent и RightContent расширяет конец страницы»). Я думаю, что вы должны прочитать то, что хотел ОП, прежде чем решить, является ли это неправильным ... и поэтому он был принят как ответ = правильный.
Показать ещё 1 комментарий
0

В настоящее время ваше решение не будет работать, это связано с тем, как documents веб-страницы визуализируются.

На данный момент из вашего HTML ваш текущий документ имеет следующую высоту:

100px (from TopContent)

+ 3px (from LeftContent)

+ 3px (from RightContent)

Поскольку document не должен быть больше 106px (на основе содержимого), тогда элемент document не будет отображаться больше, чем это.

Что вы можете сделать, чтобы обмануть это, установив атрибуты body/html CSS на высоту 100%.

Используйте следующий CSS для этого:

body,html {
    height:100%;
}

Также вам нужно будет установить высоту вашего контейнера div как

<div style="height:100%;">

Вот пример JSFiddle для вашей проблемы.

Поделиться
  • 0
    в результате вы всегда получите вертикальную прокрутку, которая выше, чем TopContent который явно не нужен
0

Как это демо?

просто добавьте float: left; на LeftContent

Поделиться
  • 1
    Ваша скрипка выглядит лучше, чем его, но ОП запрашивает, чтобы высота Left и Right делителей была высотой страницы.
  • 0
    @ C-Link спасибо, но это не связано с моим вопросом
-2

Вы должны использовать jquery, в этом случае установите высоту divs

$(window).resize(function () {
 $('#LeftContent').css('height',$(window).height());
 $('#RightContent').css('height',$(window).height());
        });
Поделиться
  • 0
    jQuery или Javascript не были помечены в этом вопросе.
  • 0
    @Nunners, я бы сказал, что это не проблема :) Пользователи часто забывают использовать правильные теги ... и если ответ дает решение (не в этом случае, но в целом), то это нормально, imo

Ещё вопросы

Сообщество Overcoder
Наверх
Меню