Выстраивание элементов в вертикальный ряд.

[Good-Kid]

Друзья привет!

 

Очень прошу вашей помощи. В общем я совсем новичок. Только прошел основы html по курсу хан академии. Пытаюсь сейчас верстать свой первый сайт по макету псд. И вот столкнулся с проблемой. Просто в отчаянии уже не знаю как решить. Перепробовал все что мог, все что нашел в гугле, пытался и тут поиском искать, вроде бы нашел несколько похожих тем но так и не смог применить решения к своей странице, видимо просто не хватает опыта и не получается правильно УВИДЕТЬ решение проблемы. 

 

Суть. 

 

Пытаюсь заверстать одностраничный сайт типа визитки или блога. Сайт состоит из 3х вертикальных элементов. Хедер, тело сайта с текстом, и футер. Так вот я в упор не понимаю как сделать так чтобы эти три элемента выстраивались в ряд. Чтобы они были всегда вне зависимости от размера окна друг под другом. У меня то и дело получается какая-то чушь вместо страницы. То один элемент наезжает на другой, то у элементов высота меняется до малюсенькой какой-то. То еще что нибудь. Я просто напросто не могу найти четкое решение в соответствии с которым нужно это все сверстать.

 

Вот сам сайт захостил посмотрите пожалуйста. http://mytestingsite.netne.net/ Надеюсь что вам будет видно. Я разбил сайт на три элемента как и говорил выше. Это 3 дива. хедер мидл и футер. Сделал флекс как было подсказано в одной из тем тут. Вроде бы выстроились в ряд. Когда окно развернуто на полную и при моем большом экране все вроде выглядит нормально. Но стоит окно свернуть как получается бред полнейший. Центральный див наезжает на все остальное. Закрывает собой все. Я не могу понять как сделать так чтобы элементы просто тупо блочно шли друг за другом при любом размере окна. Это же вроде бы элементарное действие которое чуть ли не по дефолту должно получаться при таком коде. Но нет у меня ничего не получается. Я понимаю что решение проблемы скорее всего очень легкое и это все из-за моей неопытности, но блин реально уже задолбался скоро с ума сойду   

 

 

Пожалуйста направьте меня в нужном направлении. Подскажите каким образом это можно сверстать чтобы получился по-человечески сайт. Еще подскажите как вообще лучше верстать такие сайты, чтобы элементы масштабировались в соответствии с размерами окна то есть уменьшались например когда окно сворачивается, или же сайт должен всегда сохранять одинаковый размер и даже когда окно сворачивается сайт должен оставаться неизменным? И как это осуществить опять же? Или это уже джаваскриптом делается? 

 

Заранее спасибо за помощь.

[Igor Schnaider]

Просто высота, установленная в процентах, отсчитывается относительно высоты родительского контейнера, когда она у него либо явно указана, либо когда родитель абсолютно спозиционирован. Ни того, ни другого условия здесь нет, поэтому ставится значение по умолчанию - auto.

[Good-Kid]

Спасибо большое за помощь! Вроде начало получаться.