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

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

enter image description here

My Style Sheet код

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>

источник

2013-09-21 Dilukshan Mahendra

Используйте 'min-height', [example] (http://jsbin.com/aNICAva/1/edit) – Vucko

Если вам нужна высота 100% для обоих, почему бы не установить 'height: 100%' для '.container'? – Harry

OFF-TOPIC: что вы использовали для создания этого эскиза? – Victor

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

первого решения с абсолютным позиционированием - 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() }); 
    }); 
});

источник

2013-09-21 15:11:24 mdesdev

Это работает! Спасибо mdesdev –

Добро пожаловать;) – mdesdev

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

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

источник

2013-09-21 15:08:47

Человек, это было просто. – sotix

Я пробовал это только сейчас, но не работает :( –

Этот код не может работать с пустыми div. – mdesdev

Вы должны объявить высоту HTML для Div1 элементов вместе, как:

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

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

источник

2013-09-21 15:14:04

Чувак, вы НЕ ИМЕЛИ, но можете. – user1191559

Вы можете также использовать viewport percentages, если вы не заботитесь о старой школе IE.

height: 100vh;

источник

2014-06-26 04:40:44 Dsmart

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

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>

display: inline-block; используется для отображения блоков, как инлайн (так же, как пролеты, но сохраняющий эффект блок)

Комментарии в HTML используется потому, что у вас есть 75% + 25% = 100%. Пространство между подсчетами divs (поэтому у вас есть 75% + 1%? + 25% = 101%, что означает разрыв строки)

источник

2016-01-19 10:31:24 Dionys

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

ответ

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