Адаптивная верстка или проблема с процентами, кто поможет?

Question

[Олег Машко]

Добрый вечер, добрым людям! 4-й день мучаюсь с адаптацией сайта как full-hd мониторам. Проблема в том, что мой монитор имеет разрешение 1440х900, и при переводе его в проценты он рушится, непонятной вещью для меня является как правильно задавать в процентах блок , потому как если задаю фиксированным то весь сайт в высоту не подстраивается под большее разрешение, а когда задаю в 100% то весь сайт рушится. Облазив кучу сайтов, и перепробовав разные способы все никак не получается сделать что-то дельное. Самое обидно в том, что при указании процентов для ширины - все отлично, но как только в ход идут проценты для высоты сразу начинаются проблемы.

body{
width: 100%; /*1440px*/
height: 100%; /*5119px*/
float: left;
margin: 0 auto;
}

header{
position: relative;
width: 100%; /*1440px*/
height: 15.60851728853292%; /*100vh; 799px*/
margin: 0 auto;
background-attachment: fixed;
float: left;
}

.parallax-window{
min-height:200px;
background: transparent;
}

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

Answer 1

[Андрей Б.]

Если я правильно понял, то вот пример:

<div class="container">
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
</div>

.container {
	max-width: 1440px;
	width: 100%;
}

И уберите высоту, её не указывают.

Comments

[Олег Машко]

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

[Олег Машко]

.........

.container{
width: 100%;
max-width: 1920px;
height: 100%;
}

header{
position: relative;
width: 100%; /*1440px*/
height: 15.60851728853292%; /*100vh; 799px*/
margin: 0 auto;
background-attachment: fixed;
float: left;
}

main{
width: 100%; /*1440px*/
height: 42.195741355735%;
margin: 0 auto;
float: left;
}

footer{
width: 100%; /*1440px*/
height: 42.195741355735%;
margin: 0 auto;
float: left;
}

[Андрей Б.]

Олег Машко у вас какая то каша в голове, вы не понимаете сути процентов и свойств width/height, читайте справочник или сразу спецификацию. Объясните мне, зачем вы указываете высоту для шапки, тела и фетера?

[Андрей Б.]

И margin: 0 auto; не нужно для них писать, у вас ведь есть класс container, который выступает в роли обертки и центрирует сайт.

[Андрей Б.]

и float: left; зачем? в общем пиз...ц какой то )) учите основы

[Олег Машко]

Андрей Б.: float: left для обтекаемости блоками друг друга, высоту задавал для того чтобы в правильном соотношении отображались блоки. Если высоту вовсе убрать, то ничего хорошего не получается.

[Олег Машко]

Олег Машко: если не указывать высоту, то как тогда позиционировать блоки по вертикали и как им задавать в процентах размер, если не будет значения у родительского блока.

[Serj-One]

Олег Машко: Высота обычно не указывается, тем более в процентах. Она как правило зависит от контента внутри + отступы, либо жёстко задана в px, где это необходимо. А вообще, вам правильно написали, вы не понимаете сути, начинайте заново и с самого простого.

[Андрей Б.]

"float: left для обтекаемости блоками друг друга" эм...зачем, нет, мне понятно что это свойство делает, мне не понятно зачем вам чтобы эти блоки обтекались? В каком еще правильном соотношении?
Давайте поступим так, завтра днем, если хотите, добавляйтесь ко мне в скайп (в профиле указан) и я вам объясню принцип.

[Олег Машко]

Андрей Б.: То есть можно будет у вас спросить что-то если неясно будет?) Спасибо!) А так же спасибо всем, кто отписал, у меня появились первые плоды, кажется я понял, как все это работает, убрал высоту, и сам додумался задавать ее размером содержимого за счет отступов) Теперь можно продолжать химичить) А насчет float, то это свойство очень хорошо помогает лично мне для создания пространства для паралакса, так как не нужно задавать для него место марджином соседнего блока, или позиционировать относительно всей страницы - так как такие способы неудобные и при дальнейших правках создают только лишние проблемы. Еще раз спасибо огромное, все таки правильно сделал, что задал здесь вопрос)

[Олег Машко]

Олег Машко: и как оказалось методом проб высоту фоновой картинки хорошо указывать в rem )

[Андрей Б.]

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

Answer 2

[IceJOKER]

learn.shayhowe.com/advanced-html-css/responsive-we...
blog.teamtreehouse.com/beginners-guide-to-responsi...

Зачем float-ить body?

Результат вашего кода выше - jsfiddle.net/905tuokx , ничего никуда не летит, целую картину бы, а не только вершину айсберга

Comments

[Олег Машко]

Я понимаю, что это только вершина айсберга, так оно и есть, но там кода на тысячу-другую строк) К тому же если убрать из вашего варианта слово текст, то блок вовсе пропадает, о чем и вопрос, что в высоту блок сжимается до текста который его наполняет.

[IceJOKER]

Олег Машко: чтобы установить 100% высоту, нужно установить такую ширину и у всех родителей.