Question

我不是很擅长CSS而且我正在试图弄清楚如何为我需要适应的网站做以下事情：

在内容中应该有一个左右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;
}

Answer 1

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

你给Div的最小高度还是只想让它扩展到内容的大小？

如果你使用你的外部div作为主要的空间持有者，然后用“div：relative”的内部div填充它们。并且“浮动：左/右”（根据您的需要）然后您的页面主体将拉伸到添加的内容的大小。如果你有一个最大高度并添加了一些滚动条功能，我们需要知道滚动条工具是否有自己的高度设置（是它自己的div /面板吗？）。

要添加的另一点是，当使用float时，您需要包含一个带有clear的div：两者都作为样式。这样行就能正确破解。在你想要创建一个中断的任何元素行之后使用它。一定要检查IE和Firefox，因为它们的行为不同......忘记<div class="clear" runat="server">元素会使页面看起来很有趣。 “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和其他浏览器不同。所有浏览器都不完全支持height =“auto”等属性，因此您需要考虑这一点。

最后，如果你想要伸展的东西，你可能需要使用width属性（例如height = 99％）。一般来说，我只是让页面主要内容部分的高度由内容决定。我将页面的所有“body”部分（不是html主体，但主内容和任何列）包装在具有相对位置的div中，如果我有一个左侧或右侧列，其元素少于主要部分，则设置所有to height = inherit ...或height = 100/99％应该可以工作，但你需要根据你正在做的事情来解决它，以获得浏览器中性渲染可能与你在元素中的样式有关正在加入。

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

1 个答案: