Размер DIV в зависимости от размера окна

357

26 ноября 2016, 18:36

Имеем две колонки, левая к примеру 250px, правая в зависимости от размера окна, к примеру до 900px правая колонка 600px, если размер окна более 1100px размер правой колонки 900px. Без использования JS и т.д. Сам никак не могу разобраться.

P.S. Забыл совсем уточнить, что бы правая колонка не плавала. Т.е. ее размер либо 600px либо 900px, без промежуточных значений. Как в CSS фреймворках. Их не советуйте, т.к. занимаюсь самообразованием.

Answer 1

Можешь использовать медиа запросы. Ты можешь задавать условия, при которых тот или иной блок будет принимать определённые стили. В твоём примере если ширина окна 1100px то левой блок 250px а правый 900пикселей, но получается, что он не влезет, так как 900 + 250 =1150 пикселей и правый блок будет на новой строке. Главное, чтобы ты понял, можно задавать в % , как в предыдущих примерах, а если тебе нужны конкретная ширина, то используй медиа запросы

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<style>
    .div-1 {
        float: left;
        height: 500px;
        width: 250px;
        background-color: black;
    }
    .div-2 {
        /* Ширина по умолчанию */
        width: 500px; 
        float: left;
        height: 500px;
        background-color: orange;
    }
    /* Когда ширина окна до 900 пикселей, ширина  div-2 будет 600px */
    @media screen and (max-width: 900px){
        .div-2 {
            width: 600px;
        }
    }
    /* Когда ширина окна от 1100 пикселей, ширина  div-2 будет 900px */
    @media screen and (min-width: 1100px){
        .div-2 {
            width: 900px;
        }
    }
</style>

<body>
    <div class="div-1"></div>
    <div class="div-2"></div>
</body>

Answer 2

Можно использовать CSS. Вставляется в HTML. Пример ниже, адаптивный дизайн. Колонка занимает 66% ширины окна. При этом минимальное значение 600px, а максимальное 900px. В промежуточных значениях она плавающая под размер окна

<style media="all"> 
 #element { 
    width: 66%; 
    max-width: 900px; 
    min-width: 600px; 
   } 
</style>

Answer 3

попробуй так

left{

width: 250px;

}

right{

width: -webkit-calc(100% - 250px);
width:    -moz-calc(100% - 250px);
width:         calc(100% - 250px);

}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как запретить скролинг на чистом CSS

Вот всплывающее окно, нужно чтобы при его появлении пользователь не мог прокручивать ленту контента до того как закроет его

324

CSS

Отступ при использовании legend в fieldset

При использовании legend, снизу него появляется отступ и всё выглядит неравномерно:

491

CSS

Css className:nth-child - как сделать подобие nth-child для класса

Есть группа li элементов с заданным классамКак выбрать ряд и отдельные элементы (input в li) для определенного класса?

230

CSS

Не работают ссылки в revolution slider

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

494