@Thegaar

Как прижать футер вниз в моём случае?

Ребят, не получается прижать футер вниз. В чём проблема?

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="css/main.css"/>
</head>
<body>
    <div id="wrapper">

        <div id="header">
             header
        </div>
        
       <div id="work_area">
            content
        </div>

        <div id="footer">
            footer
        </div>

    </div>
</body>
</html>


CSS
html, body{
	height: 100%;
	font-family: Helvetica;
}

div#wrapper{
	position: relative;
	width:auto; 
	height:100%;
	margin:auto; 
}

div#header{
	margin-left: 6px;
	margin-top: 8px;
	margin-right: 6px;
	width: auto;
	height: 200px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

div#work_area{
	margin-left: 6px;
	margin-top: 8px;
	margin-right: 6px;
	height:auto;
	width: auto;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

div#footer {
  position: relative;
  margin-left: 6px;
  margin-top: 6px;
  margin-right: 6px;
  margin-bottom: 8px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  width: auto;
  height: 180px;
}


Есть ли сильные косяки в вёрстке? Если есть поправьте пожалуйста. Заранее спасибо!
  • Вопрос задан
  • 321 просмотр
Решения вопроса 1
универсальный способ! codepen.io/anon/pen/vGYQKw

UPD: без wrappera - codepen.io/anon/pen/aNbPwb
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
mbeloshitsky
@mbeloshitsky
Вебдев, систем оперейшонс, ж.д. автоматика
Вот так или так.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы