Растяжка подвалапо вертикали

Panic · November 10, 2012

Добрый вечер, господа.

Вопрос такой - есть блок фиксированного с контентом с автоматическим отступом, под ним растянутый на весь экран подвал.

В блок вставляется таблица, появляется горизонтальная прокрутка, однако подвал остается фиксированным ровно на 100% размера окна браузера.

Та же проблема на всех страницах, если окно браузера уменьшить менее чем на 960px - появляется прокрутка, содержимое footer'a видно, но вот фона в области за полосой прокрутки уже как не бывало.

Что нужно исправить, чтобы он растягивался на всю страницу?


<html>
<body>
    <div class="container">
    </div>
    <footer>
    </footer>
</body>
</html>


html
{
	min-width: 100%;
	min-height: 100%;
}
body
{
	width: 100%;
	height: 100%;
}
div.container
{
	width: 960px;
	margin: 0 auto;
	margin-top: 20px;
}
footer
{
	width: 100%;
	display: inline-block;
	background-color: #7D7D7D;
	padding-bottom: 20px;
	margin-top: 20px;
	position: relative;
}

logicface · November 10, 2012

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

Panic · November 10, 2012

попробовал, но толку ноль. Может более точная структура поможет

<html>
<body>
    <div class="container"> <- 960px
        <header></header> <-100%
        <div class="content"> <-100%
            <nav></nav>    <-260px
            <article><table width="2000px"></table></article>   <-700px, внутри таблица гораздо больше размера самого блока, н-р 2000px
        </div>
    </div>
    <footer>
    </footer>
</body>
</html>

Edited November 10, 2012 by Panic

rikimaru2013 · November 10, 2012

попробовал, но толку ноль.

http://cssdesk.com/QY3gd

Меняем значение .container{width: 1200px;} и футер тянится за ним.


<html>
<head>
<style>
html
{
        min-width: 100%;
        min-height: 100%;

}
body
{
        width: 100%;
        height: 100%;
         margin:0;
        padding:0;
}
.container
{
  margin-top:600px;
  background:orange;
        width: 800px;
        height:150px;


}
.wrap {background:yellow; 
height: 1200px; 
margin-top:1px;}
footer
{

    position: relative;
    left: 0; bottom: 0;
    height:200px;
    padding: 10px; 
    background: #39b54a; 
    color: #fff; 

}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
</style>
</head>
<body>
<table>
<tr><td>
<div class="wrap">
dfsf
    <div class="container">table
    </div>
</div>
</td></tr>
<tr><td>
    <footer>footer
    </footer></td>
</tr>
</table>
</body>
</html>

:boast: Какой же я мАладец!

logicface · November 10, 2012

Поспешил)

Edited November 10, 2012 by logicface

logicface · November 10, 2012

Короче, я сделал что то похожее и вроде бы оно даже работает, но я думаю, что так не правильно.=D

Вот - страх и ненависть в CssDesk: http://cssdesk.com/pMzBb

Sign In

Растяжка подвалапо вертикали

Question

Panic

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

logicface

Link to comment

Share on other sites

Panic

Link to comment

Share on other sites

rikimaru2013

Link to comment

Share on other sites

logicface

Link to comment

Share on other sites

logicface

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information