当前位置：文江博客话题详情

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

发布于 2024-12-27 14:36:31 字数 3168 浏览 0 评论 0原文

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

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

几乎类似于：又一个 HTML/CSS 布局挑战 - 带粘性页脚的全高侧边栏

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

我无法弄清楚的部分是如何让内容 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;
}

原文

I'm not really good at CSS and I'm trying to figure out how to do the following for a website I need to adapt:

container_div(directly under body) of 100% height (body is also 100% height), with header of 170px height, then content div (which should be stretched from bottom header down to), footer div with copyright notice of 50px height.

in content there should be a left and right div (both position: relative; float: right/left;)

almost something like: yet another HTML/CSS layout challenge - full height sidebar with sticky footer

but then content should be overflow: hidden (i use a custom scrollbar script)

The part which I can't figure out is how to let the content div (between the header and footer div) consist of the remaining hight.

I've tried fiddling with adding background to container with 100% height, but since my header and footer are transparant you can see the background of content through them which is ugly.

Can somebody give me a nudge in the right direction with a standard template? I can figure out the rest myself.

Just the CSS code for the content div would be fine either (with some explanation regarding to the rest of the css)

EDIT:

Just so we have something to work with (which is easier to answer my question to)

    <!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 style:

    /*          <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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

十级心震 2025-01-03 14:36:31

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

您是否为 Div 提供了最小高度，或者您只是希望它缩放到内容的大小？

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

还要补充的一点是，当使用 float 时，您需要包含一个带有 clear:both 样式的 div。这样可以正确地换行。在要创建换行的任何元素行之后使用此选项。请务必检查 IE 和 Firefox，因为它们的行为不同......并且忘记

元素将使页面看起来很有趣。 “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%）。一般来说，我只是让页面主要内容部分的高度由内容决定。我将页面的所有“正文”部分（不是 html 正文，而是主要内容和任何列）包装在具有相对位置的 div 中，这样如果我的左列或右列的元素少于主要部分，则设置所有height =继承...或height = 100 / 99%应该可以工作，但是您需要根据您正在做的事情来使用它，因为获得浏览器中性渲染可能与您元素中的样式有关正在添加。

There are several ways to use CSS to help lay out your Div's. You are on the right page with considering the float: left / right and position:relative. I guess to fully answer your question I would need to know the following:

Are you giving a minimum height to the Div or do you just want it to scale to the size of the contents?

If you use your outer div's as main space holders and then fill them with inner div's that are "position:relative;" and "float:left / right"(whichever you need) then your page body will stretch to the size of the content added. If you have a max height and adding some scroll bar functionality we would need to know if that scroll bar tool has it's own height set (is it it's own div / panel?).

One more point to add is that when using float's you will need to include a div with clear:both as a style. This way lines break correctly.Use this after any line of elements that you want to create a break. Be sure to check in both IE and Firefox as they act differently ... and forgetting the <div class="clear" runat="server"> element will make the page look funny. CSS for the "clear" class is here:

.clear
{
  clear:both;
}

I used these links when first figuring this stuff out:

CSS Position: http://www.barelyfitz.com/screencast/html-training/css/positioning/

CSS Height: http://v1.reinspire.net/blog/2005/10/11/css_vertical_stretch/

Just be aware that IE and other browsers differ. Attributes like height="auto" is not fully supported by all browsers so you would need to take this into account.

Finally, if you are looking to get things to stretch you may need to play around with the width attribute (e.g. height=99%). Generally I just let the height of the page's main content section be dictated by the contents. I wrap all the "body" portion of the page (not html body but main content and any columns) in a div with a relative position and that way if I have a left or right column with less elements than the main section, setting all to height = inherit ... or height = 100 / 99% should work, but you need to play around with it based on what you are doing as to get a browser neutral rendering may have some to do with the styles in the elements you are adding.

回复收藏 0 原文

~没有更多了~