Высота CSS 100% процентов не работает

У меня есть div с height: 100%;, но он не работает. Когда я объявляю фиксированную высоту (например, height: 600px;), она работает, но мне нужен отзывчивый дизайн.

HTML:

<blink><div class="row-fluid split-pane fixed-left" style="position: relative; height: 78%;">
    <div class="split-pane-component" style="position: relative; width: 50em;">
        <div style="">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#html" data-toggle="tab">Html</a></li>
                <li><a href="#helpers" data-toggle="tab">Helpers</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="html" style="height: 100%;">
                    <textarea id="htmlArea" style="height: 100%;">{{:html}}</textarea>
                </div>
                <div class="tab-pane" id="helpers" style="height: 100%;">
                    <textarea id="helpersArea">{{:helpers}}</textarea>
                </div>
            </div>
        </div>
    </div>
    <div class="split-pane-divider" id="my-divider" style="left: 50em; width: 5px;"></div>
    <div class="split-pane-component" style="left: 50em; margin-left: 5px;">
        <div style="">
            <ul class="nav nav-tabs">
                <li>
                    <a href="#" class="active">Preview
                    <img width="22px" height="16px" class="preview-loader" src="img/spinner-green2.gif" style="display: none" />
                    </a>
                </li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" style="height: 100%;">
                    <iframe name="previewFrame" frameborder="0" allowtransparency="true" allowfullscreen="true" style="width: 100%; height: 100%;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
</blink>

Ответы

Ответ 1

Вероятно, вам нужно объявить код ниже для height:100% для работы с вашими div

html, body {margin:0;padding:0;height:100%;}

скрипт: http://jsfiddle.net/5KYC3/

Ответ 2

Вы не указали "высоту" вашего html. Когда вы назначаете процент в элементе (например, div), компилятор css должен знать размер родительского элемента. Если вы не назначили это, вы должны увидеть divs без высоты.

Наиболее распространенным решением является установка в css следующего свойства:

html{
    height: 100%;
    margin: 0;
    padding: 0;
}

Вы говорите тегу html (html является родительским элементом всех элементов html) "Возьмите всю высоту в документе HTML"

Надеюсь, я тебе помог. Приветствия

Ответ 3

Я бы сказал, у вас есть два варианта:

1), чтобы получить все родительские divs в стиле 100% высоты (включая тело и html)

2) использовать абсолютное позиционирование для одного из родительских div (например, #content), а затем все дочерние divs установлены на высоту 100%

Ответ 4

Установите содержащий элемент /div на высоту. В противном случае вы попросите браузер установить высоту на 100% от неизвестного значения, и это невозможно.

Дополнительная информация здесь: http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

Ответ 5

Ночной ответ правильный

 html, body {margin:0;padding:0;height:100%;}

Также убедитесь, что ваш div или элемент НЕ внутри другого (с высотой менее 100%). Надеюсь, это поможет кому-то еще.

Ответ 6

Я считаю, что вам нужно убедиться, что все теги div контейнера выше 100% высоты div также имеют 100% высоту, установленную на них, включая тег body и html.

Ответ 7

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

http://codemirror.net/demo/fullscreen.html

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  lineNumbers: true,
  theme: "night",
  extraKeys: {
    "F11": function(cm) {
      cm.setOption("fullScreen", !cm.getOption("fullScreen"));
    },
    "Esc": function(cm) {
      if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
    }
  }
});

А также взгляните на:

http://codemirror.net/demo/resize.html

Также комментарий:

Встраивание стиля ужасно, вы должны избегать этого любой ценой, это не только смутит вас, но и плохую практику.