фиксированные divs для жидкостных divs

Я пытаюсь создать страницу, где заголовок на 100% широкий и занимает 20% высоты на экране с левой навигационной панелью (ширина 20%) и смежным основным корпусом (80% ширина). Я также пытаюсь сделать жидкостью страницы, чтобы поддерживать ее соотношение на экранах разного размера.фиксированные divs для жидкостных divs

html 

<!doctype html> 
<html lang="en"> 
<head> 
    <title>Test</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 

    <div class="header"> 


    </div> 

    <div class="left"> 

    </div> 

    <div class="main"> 

    </div> 

</body> 

</html>

CSS (с фиксированными свойствами закомментирована)

#header{ 
    height:20%; 
    width:100%; 
    background-color: #3B3738; 
    /*min-height:80px; 
    min-width: 100%;*/ 
} 

#left{ 
    height:80%; 
    width:20%; 
    background-color: #848484; 
    /*min-height:550px; 
    min-width:20%; 
    position: relative; 
    float:left;*/ 
} 

#main{ 
    height:80%; 
    width:80%; 
    background-color: #FDF3E7; 
    /*min-height:550px; 
    min-width:80%; 
    position: relative; 
    float:left;*/ 
}

Как я могу сделать это так, расположение реагирует?

источник

2015-04-07 user3019558

проверить медиа-запросы CSS ... ответ, который вы ищете, может быть длинным, хотя – ochi

Вы выполнили всю свою ширину на%, чтобы она изменилась с размером окна. Если вы хотите, чтобы сайт был отзывчивым, значит, вы не хотите, чтобы он поддерживал одинаковое соотношение независимо от размера экрана - это немного противоречие. Вы хотите, чтобы он поддерживал рацион вниз (или вверх) до определенного разрешения, прежде чем адаптировать макет в ответ на ширину (например, сведение к минимуму меню или создание одного столбца)? – wunth

Я не знаю точно, что ваш вариант использования, но вы подумали об использовании чего-то типа Twitter Bootstrap для этого?

http://getbootstrap.com/

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

http://getbootstrap.com/css/#grid

Я надеюсь, что это полезно для вас.

источник

2015-04-07 20:42:04 HisPowerLevelIsOver9000

Просто, чтобы сообщить вам, я решил свою проблему, используя vh и vw в моем css вместо% или px. Чистое и простое решение, которое подходит для моих упражнений.

источник

2015-04-09 18:33:57 user3019558

фиксированные divs для жидкостных divs

ответ

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