填充内容（高度）的css布局

Posted

技术标签:

【中文标题】填充内容（高度）的css布局【英文标题】：css layout with filling content (height) 【发布时间】：2012-02-11 08:39:48 【问题描述】：

我不太擅长 CSS，我正试图弄清楚如何为我需要适应的网站执行以下操作：

container_div（body 正下方）100% 高度（body 也是 100% 高度），header 高度为 170px，然后是 content div（应该从底部 header 向下延伸），footer div 与版权声明为 50px高度。

在内容中应该有一个左右div（位置：相对；浮动：右/左；）

几乎像：yet another html/CSS layout challenge - full height sidebar with sticky footer

但是内容应该溢出：隐藏（我使用自定义滚动条脚本）

我不知道的部分是如何让内容 div（在页眉和页脚 div 之间）由剩余的高度组成。

我尝试过为 100% 高度的容器添加背景，但由于我的页眉和页脚是透明的，你可以通过它们看到内容的背景，这很丑。

有人可以用标准模板帮助我朝着正确的方向前进吗？其余的我可以自己解决。

只是内容 div 的 CSS 代码也可以（对 CSS 的其余部分进行一些解释）

编辑：

只是为了让我们有一些东西可以使用（这更容易回答我的问题）

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>stretchy footer</TITLE>
<LINK rel="stylesheet" type="text/css" href="index.css" />
</HEAD>

<BODY>
<DIV id="container">

    <DIV id="header">
        <IMG src="./image/header2.png">
    </DIV>


    <DIV id="left">
        <DIV id="content">
            This is the div which needs to be stretched between header and footer.
        </DIV>
    test<BR>
    test<BR>
    test<BR>
    test<BR>
    test<BR>


    </DIV>

    <DIV id="right">
    t
    </DIV>

</DIV>
</BODY>
</HTML>

css 样式：

    /*          <GENERAL>           */
    /* cross-browser reset stylesheet */
    *  margin: 0; padding: 0; border-style: none;

    *:hover, *:active, *:focus 
        outline: 0;
    

    html 
        filter: expression(document.execCommand("BackgroundImageCache", false, true));
        line-height: 1;

        -moz-user-select: none;
        -moz-user-select: -moz-none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        user-select: none;
        -webkit-min-device-pixel-ratio:0;
        height: 100%;
    body height: 100%; /* safe crossbrowser font */
    a text-decoration: none; outline: none;
    a:active  
        border: none;
        outline: none;
    .imagewrapper img 
        display: inline-block;
        width:100%;
        -ms-interpolation-mode:bicubic;
        image-rendering:-webkit-optimize-contrast;
        image-rendering:-moz-crisp-edges;
        image-rendering: optimizeQuality;
        zoom:1; *display: inline;
/*          </GENERAL>          */


.clear 
    clear: both; /* deze class gaan we gebruiken om de twee floats #left en #right te clearen. */


#container 
    height: 100%;
    width: 1018px;
    margin: 0em auto -10em auto;

    position: relative;



#left 
    display: inline-block;
    float: left;
    height: 100%;
    width: 950px;
    padding: 0em 2em 0em 1em;
    border: 1px solid brown;
    background: url(./image/main.png);

#left p 
text-align: justify;


#right 
    float: right;
    width: 14px;
    border: 1px solid red;

【问题讨论】：

您是否希望页眉和页脚始终可见？ 【参考方案1】：

有几种方法可以使用 CSS 来帮助布局您的 Div。您在正确的页面上考虑浮动：左/右和位置：相对。我想要完全回答你的问题，我需要知道以下几点：

你是给 Div 一个最小高度还是只希望它缩放到内容的大小？

如果您使用外部 div 作为主要空间持有者，然后用“位置：相对”的内部 div 填充它们和“float:left / right”（无论你需要什么）然后你的页面主体将拉伸到添加的内容的大小。如果您有一个最大高度并添加了一些滚动条功能，我们需要知道该滚动条工具是否有它自己的高度集（它是自己的 div / 面板吗？）。

还有一点要补充的是，当使用 float 时，您需要包含一个带有 clear:both 的 div 作为样式。这样线会正确中断。在要创建中断的任何元素行之后使用它。请务必检查 IE 和 Firefox，因为它们的行为不同……忘记&lt;div class="clear" runat="server"&gt; 元素会使页面看起来很有趣。 “clear”类的 CSS 在这里：

.clear

  clear:both;

我在第一次弄清楚这些东西时使用了这些链接：

CSS 位置：http://www.barelyfitz.com/screencast/html-training/css/positioning/

CSS 高度：http://v1.reinspire.net/blog/2005/10/11/css_vertical_stretch/

请注意，IE 和其他浏览器有所不同。并非所有浏览器都完全支持 等属性，因此您需要考虑到这一点。

最后，如果您希望拉伸物体，您可能需要使用宽度属性（例如高度=99%）。通常我只是让页面的主要内容部分的高度由内容决定。我将页面的所有“正文”部分（不是 html 正文，而是主要内容和任何列）包装在一个具有相对位置的 div 中，如果我的左列或右列的元素少于主要部分，则设置所有到 height = inherit ... 或 height = 100 / 99% 应该可以工作，但是您需要根据您正在做的事情来玩弄它，因为要获得浏览器中性渲染可能与您元素中的样式有关正在添加。

【讨论】：

您好 Qubits 感谢您抽出时间来帮助我。我不想给内容 div 一个设定的高度，也不要将其缩放到内容。我想在页眉（170 像素高度）和页脚（50 像素高度）之间拉伸它。 max-height 的问题是我的页面也在非标准分辨率下查看（屏幕倾斜 90 度，分辨率为 768x1024）。这就是为什么我希望我的内容 div 在页眉和页脚之间伸展。滚动条工具也不使用设置高度，它可以只使用正确的 div 并作为子对象调整到它的高度。 我使用自己的重置脚本来实现跨浏览器兼容性。我现在正在寻找的是一种在页眉和页脚之间拉伸#content div 的简单方法，但还没有找到任何简单的方法。我用不同的 css 设置和布局摆弄了分配，但似乎没有什么能满足我在这里想要做的事情。 所以这就是我要求轻推的原因。我没有跨浏览器换行的问题，所以我不需要 clear: both;环境。我会查看这些链接，看看是否可以让我到达某个地方，在此先感谢！ 我添加了一些示例代码只是为了让事情变得更简单。没关系清楚：这两个评论都是旧代码..但至少我们有一些东西可以使用。 按照示例代码，我想我也应该对#left 做一些事情，但不知道具体是什么。我注意到，当我将 #left 设置为高度 100%（有效）然后将 #content 设置为 100% 时，内容不会像 left 那样拉伸。或者 left 没有像容器那样伸展，类似的东西。我觉得这很奇怪，因为它是一个子对象，它的父对象的高度设置为 100%...

以上是关于填充内容（高度）的css布局的主要内容，如果未能解决你的问题，请参考以下文章

CSS 100% 高度布局

CSS 网页布局基础

DIV+CSS布局问题 100%的页面上边固定高度下面div：height100%填充为左右结构左边固定宽度右边width:100%

CSS Flex 布局的引入背景

CSS3之伸缩布局盒模型

css 左侧高度 跟随右侧内容高度 自适应