Установите высоту div, чтобы она соответствовала браузеру с помощью CSS

У меня есть два DIV внутри контейнера div, где мне нужно установить их как в окно браузера, как показано ниже, но оно не соответствует моему коду, пожалуйста, предложите мне решение

Код моего стиля

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

            }

.container {
    height: auto;
    width: 100%;
}
.div1 {
    float: left;
    height: 100%;

    width: 25%;
}
.div2 {
    float: left;
    height: 100%;
    width: 75%;
}

Тело

<body>
<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

Ответ 1

Установка полной высоты окна для пустых div

1-е решение с абсолютным позиционированием - FIDDLE

.div1 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25%;
}
.div2 {
  position: absolute;
  top: 0;
  left: 25%;
  bottom: 0;
  width: 75%;
}

Второе решение со статическим (также может использоваться относительное) позиционирование и jQuery - FIDDLE

.div1 {
  float: left;
  width: 25%;
}
.div2 {
  float: left;
  width: 75%;
}

$(function(){
  $('.div1, .div2').css({ height: $(window).innerHeight() });
  $(window).resize(function(){
    $('.div1, .div2').css({ height: $(window).innerHeight() });
  });
});

Ответ 2

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

height: 100vh;

Ответ 3

Человек, попробуйте минимальную высоту.

.div1 {
    float: left;
    height: 100%;
    min-height: 100%;
    width: 25%;
}
.div2 {
    float: left;
    height: 100%;
    min-height: 100%;
    width: 75%;
}

Ответ 4

Вы должны объявить высоту html для элементов div1 вместе, например:

html,
body,
.container,
.div1,
.div2 {
    height:100%;
}

Демо: http://jsfiddle.net/Ccham/

Ответ 5

Я не думаю, что вам нужно плавать.

html,
body,
.container {
  width: 100%;
  height: 100%;
}

.div1, .div2 {
  display: inline-block;
  margin: 0;
  min-height: 100%;
}

.div1 {
  width: 25%;
  background-color: green;
}

.div2 {
  width: 75%;
  background-color: blue;
}

<div class="container">
  <div class="div1"></div><!--
  --><div class="div2"></div>
</div>