内容容器适合屏幕尺寸？

如果有一个非常基本的布局，带有标题，内容容器和页脚。我需要做的是让我的内容容器大小，以便整个布局适合在屏幕上。（除非内容容器中的文本扩展了这一点）。内容容器适合屏幕尺寸？

我试过把高度100％的值分配给我的身体，并从那里分配我的内容容器高度为100％，但这导致我的内容容器大小达到全屏高度。

在此之前，我已将内容容器的高度设置为auto，这当然导致页面不够长，如果访问者的屏幕尺寸大于布局，则查看该页面。

这里是我的代码的一部分：

HTML：

<body> 
    <div class="background"></div> 
     <div class="page"> 
      <div class="header"> 
      </div> 

      <div class="content"> 
      </div> 

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

CSS：

html, body { 
    height:100%; 
    margin:0; 
    padding:0; 
} 
.page { 
    position:relative; 
    height:100%; 
    z-index:1; 
} 
.content { 
    position:relative; 
    width:850px; 
    height: 100%; 
    margin: 0 auto; 
    background: url(images/content.png) 0 0 repeat-y; 
}

来源

2012-09-09 Mathias

我对如何做到这一点感到困惑。我最终不得不使用JavaScript来获取'（screenheight - header - footer）'并将'content'的高度设置为这个。 –

您应该花费更少的时间编写基本的CSS，并花更多的时间去做您的网站实际上做的事情......为此，您可以使用CSS框架f.ex启动。 [** Twitter Bootstrap **]（http://twitter.github.com/bootstrap/base-css.html），你可以很容易地从这个[演示页面]获得源代码（http：//twitter.github。 com/bootstrap/examples/fluid.html）并从那里开始。 – balexandre

是的。我认为这可能是最好的解决方案，尽管我更喜欢css解决方案。 – Mathias

我想这你需要什么（页脚将始终粘在底部）

CSS

html, body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
.page { 
    min-height:100%; 
    position:relative; 
} 
.header { 
    background:#00ff0f; 
    padding:30px; 
} 
.content{ 
    padding:10px; 
    padding-bottom:45px; /* Height+padding(top and botton) of the footer */ 
    text-align:justify; 
} 
.footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:15px; /* Height of the footer */ 
    background:#00ff0f; 
    padding:10px 0; /*paddingtop+bottom 20*/ 
} 

.content { 
    height:100%; // IE HACK 
}

HTML

<div class="page"> 
    <div class="header">Header</div> 
    <div class="content"> 
     Some Content Here... 
    </div> 
    <div class="footer">Footer</div> 
</div>

经过所有主流浏览器测试。 DEMO。

来源

2012-09-09 19:43:14

你真正想要的是一个棘手的注脚，不是吗？您可以对其他元素进行样式设置，以给出#content元素比实际更大的错觉。

http://ryanfait.com/sticky-footer/

来源

2012-09-09 19:19:01 cimmanon

内容容器适合屏幕尺寸？

回答

相关问题