html - 具有填充内容(高度)的CSS布局-6ren

html - 具有填充内容(高度)的CSS布局

转载作者：行者123 更新时间：2023-11-28 14:17:50

24

4

我不太擅长 CSS，我正在尝试弄清楚如何为我需要调整的网站执行以下操作:

container_div(directly under body) 100% height (body 也是 100% height), header 170px height, 然后是 content div (应该从 bottom header 向下延伸到), footer div with copyright notice 50px高度。

在内容中应该有一个左右div(两个position:relative； float :右/左；)

几乎是这样的: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;
}

最佳答案

有多种方法可以使用 CSS 来帮助布置您的 Div。考虑到 float :左/右和position:relative，您在正确的页面上。我想要完全回答您的问题，我需要了解以下内容:

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

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

还有一点要补充的是，当使用 float 时，您需要包含一个带有 clear:both 作为样式的 div。这样可以正确换行。在要创建换行的任何元素行之后使用它。请务必检查 IE 和 Firefox，因为它们的行为不同......并且忘记了 <div class="clear" runat="server">元素将使页面看起来很有趣。 “清晰”类的 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"这样的属性，因此您需要考虑到这一点。

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

关于html - 具有填充内容(高度)的CSS布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8879447/

24

4

0

文章推荐： javascript - 错误: Expected spy create to have been called

文章推荐： css - 使用 float 属性使 div 居中

文章推荐： javaScriptstartsWith 方法给出错误

文章推荐： css - 如何创建具有圆边和类似网格表样式的表格？

css - 如何将 CSS 文件的 CSS 规则包含到另一个 CSS 文件的选择器中？
我有一个名为 main.css 的 css 文件和另一个名为 style.css 的文件。我怎样才能在 main.css 中做到这一点？ .someClass { //apply rules to
css - 将 css 文件移动到新的 css 文件夹后无法从我的 css 访问我的图片
在更新我的 css 之前，我在 Login.css 中有以下内容: body { background-image: url('./pictures/fond.png'); bac
css - css 3 中是否有任何 css 类分组 css 类？
我的 share point 2013 核心 css 和我的 css 之间存在 css 冲突。所以我想把我所有的类都放在 div #s4-workspace 下但是我搜索了一种方法来将所有类分组到这个
css - 使用内联 CSS 删除从 CSS 文件继承的 CSS 属性
我知道您可以覆盖 jsp 页面从 jsp 包含 CSS 文件(即全局 CSS 文件)继承的 CSS 属性。但是，如果元素中的某个属性弄乱了特定页面，而我不想只使用内联 CSS 在该页面中使用它怎么办
css - 初始规模与 desktop.css+phone.css+tablet.css？
我刚刚发现了 initial-scale 元属性。以前，我一直在使用 default.css 来定义我所有的样式和大小(用于字体和元素)，以便它们在桌面计算机的屏幕上显示得很好。然后，如果您使用的是
css - LESS CSS - 提取生成的 CSS
我正在尝试使用 LESS CSS 来编写我的 CSS。我已经按顺序导入了 style.less 和 less.js 文件。现在我想提取 LESS 生成的 CSS。有什么办法可以做到吗？我不想使用脚本
css - 如何将内联 CSS 转换为外部 CSS？
我想知道是否有任何一种软件可以读取大量内联样式中的 HTML 文档并将所有这些样式转换为外部 css 文件。如果只有一页，我可以手动完成。但是有100页。有人有想法吗？最佳答案就像有人说的那样，“
css - 来自样式化组件时 CSS 模块中的动态 CSS
当我想从 Styled Components 迁移到 CSS Modules 时，出现了以下问题。假设我有以下样式组件，它接受动态参数 offset和一个动态 CSS 字符串 theme : con
css - 在 CSS 中引用 CSS
有没有办法将 CSS 类定义为与另一个类相等？例如，如果我有一个类: .myClass{ background-color: blue; } 有没有一种方法可以将第二个类定义为与 myClas
css - 如何基于一个元素的 CSS 或它的前一个相邻兄弟的 CSS？
我正在尝试制作一组按钮，这些按钮贴在页面底部并且由固定的空间隔开。我正在使用 angularJS 的 ng-repeat 指令通过 ajax 请求获取数据，然后我用它来显示按钮。我的问题在于让按
css - 浏览器是否在加载 CSS 文件时解析 CSS？
浏览器是否在加载 CSS 文件时解析 CSS？还是在整个 CSS 文件被浏览器下载后才进行解析？不同浏览器的做法有区别吗？我在哪里可以找到这种底层信息？这个问题不是 Load and executi
css - 将已经定义的 CSS 添加到另一个 CSS
这个问题在这里已经有了答案: Can a CSS class inherit one or more other classes? (29 个答案) 关闭 3 年前。标题有点乱，我给大家看一下。假
css - css/main.css 是否还有其他用途？
我遇到了最奇怪的问题...... 在最简单的形式中，我有一个包含以下内容的 index.html 文件: (在尝试确定根本原因的过程中，我已经大大减少了它) 当我查看页面的源代码时，我得到以下信息:
css - 如果缺少所需的 css，则加载备用 css
我正在使用 Mindscape Workbench 来最小化我的 scss 文件。我的页面设置为使用 *.min.css 文件。在随机时间，min 文件不会与系统的其余部分一起发布。我有很多 css
css - CSS 框架和 CSS 网格有什么区别
请告诉我 CSS 框架和 CSS 网格之间的区别。最佳答案 CSS 框架也可以是 CSS 网格框架。 CSS 网格框架用于构建 CSS 布局。有一些框架除了构建布局还有其他用途，例如 Hartija
css - 如何摆脱从 css 文件继承的 css？
我有无法从页面中删除或更改的 original.css 文件。原始.css table { border-collapse: collapse; border-spacing: 0;
css - 带有 CSS 模块的普通 CSS
我以前使用 bootstrap css import 很好。但是我正在尝试使用 CSS 模块，所以我添加了几行。 { test: /\.css$/, use:
css - CSS 中的嵌套 CSS 选择器
有没有办法在 css 选择器中创建一个 css 组。例如: .SectionHeader { include: .foo; include: .bar; include: .
css - CSS 定位和 CSS 边距之间的区别
今天我学习了 CSS 中的两个概念，一个是 CSS 定位(静态、相对、绝对、固定)，另一个是 CSS Margin，它定义了元素之间的空间。假设我想移动一个元素，这是最好的方法吗？因为这两个概念似乎
css - Gulp CSS 任务不会覆盖现有的 CSS
var paths = { css: './public/apps/user/**/*.css' } var dest = { css: './public/apps/user/css/' } /

首页

博学

6Ren·AI

商城

html - 具有填充内容(高度)的CSS布局