3

我对这个很迷茫。经过无数小时的搜索和尝试，我还没有找到可行的解决方案。

我在同时实现以下三点时遇到问题：

  1. 在底部获得一些填充。（当内容变长时，最终底部没有空白空间。）
  2. 获取左右两边与最长的内容一起展开
  3. 当旁边比主要内容短时，分隔线仍应从上到下。

一些注意事项：

  • 目前，第三点正在发挥作用。

  • 当将旁边的位置更改为相对位置时，页面会按应有的方式扩展。尽管第三点不再起作用。

  • 还没有找到第一个的任何解决方案。

这是我的布局的缩小版本。由于在这少量代码中仍然存在所有问题，那么这可能就足够了：

索引.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="wrapper">
            <header>
                <nav>
                    <!--My nav here-->
                </nav>
            </header>
            <div id="content_wrapper">
                <aside>
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere sodales ante id facilisis. Vestibulum euismod mattis nisl, id consequat tortor suscipit vitae. Maecenas sit amet dolor nibh. Quisque vitae commodo augue. Nullam bibendum posuere est, non gravida ante lacinia quis. Vestibulum imperdiet orci eu nisl posuere a gravida orci ullamcorper. Nullam quis lacus ipsum.
                    </p>
                </aside>
                <div id="content">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere sodales ante id facilisis. Vestibulum euismod mattis nisl, id consequat tortor suscipit vitae. Maecenas sit amet dolor nibh. Quisque vitae commodo augue. Nullam bibendum posuere est, non gravida ante lacinia quis. Vestibulum imperdiet orci eu nisl posuere a gravida orci ullamcorper. Nullam quis lacus ipsum.
                    </p>
                </div>
            </div>
        </div>
    </body>
    </html>

样式.css

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #ebebeb;
}

#wrapper {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

#content_wrapper {
  position: absolute;
  width: 1000px;
  top: 90px;
  background-color: #fff;
}

#content_wrapper aside {
  position: relative;
  float: left;
  width: 200px;
  padding: 10px;
  top: 0px;
  bottom: 0px;
  box-shadow: inset -8px 0 10px -6px #ddd;
}

#content {
  float: right;
  width: 760px;
  padding: 10px;
}

我很确定这需要从头开始重新构建。

但在我成功地做到这一点之前，我想了解我的问题的原因，这可能很容易解决吗？

或者换句话说，实现这种布局的最佳/工作方式是什么，以便一切都能正确扩展，并且底部仍然可以有填充？

很感谢任何形式的帮助。

4

2 回答 2

8

这实际上与我的问题非常相似，尽管我没有意识到：

在此处输入图像描述

将列内容与其背景颜色分开

解决等高问题的第一步是将其分解成可以单独解决的小块。我们这样做的方法是为每一列使用两个 div 而不是一个。第一个 div 将用于保存内容，另一个将用作背景颜色。这种分离使我们能够单独控制这些元素，而且我们可以以更有用的方式将它们组合在一起。这一切都将很快变得清晰。

浮动容器 div 将始终是其浮动内容的高度

这是这种等柱高方法背后的核心原则。使 div 的高度等于最高列的唯一方法是该 div 包含所有列。所以用另一种方式解释这一点，通过将列放置在容器内，我们使容器成为最高列的高度。这是一个非常有用的结构。

容器 div 解释

三列 HTML div 结构

在上面的示例中，三个内容列位于容器 div 内。

<div id="container1">
    <div id="col1">Column 1</div>
    <div id="col2">Column 2</div>
    <div id="col3">Column 3</div>
</div>

三列 CSS

这是强制容器 div 到最长列的高度的 CSS。

#container1 {
  float:left;
  width:100%;
}
#col1 {
  float:left;
  width:30%;
  background:red;
}
#col2 {
  float:left;
  width:40%;
  background:yellow;
}
#col3 {
  float:left;
  width:30%;
  background:green;
}

为了让这个结构在所有浏览器中正常工作，容器 div 必须是浮动的（左或右）加上每个列内容 div 也必须是浮动的，无论哪种方式都没有关系。浮动内容 div 的过程使它们在页面上水平排列。浮动容器使其延伸到内部最高柱的高度。如果我们不浮动容器，那么内容 div 将在底部伸出容器，并且容器不会有正确的高度。实际上，在这个例子中，如果容器没有浮动，容器的高度最终会为零。

添加额外的嵌套容器

等高列的下一步是添加额外的容器，以便它们相互嵌套。我们需要与列相同数量的容器 - 三个。这三个容器将成为每一列的背景。请注意，我们已经从原始列中删除了背景颜色并将它们添加到容器中。

初始布局

三列 HTML div 结构

两个额外的容器已添加到下面的 HTML 中。

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

三列 CSS

所有元素都向左浮动，容器的宽度设置为 100%，因此它们保持页面的整个宽度。背景颜色已从内容 div 中删除并添加到容器中。

#container3 {
    float:left;
    width:100%;
    background:green;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
}
#container1 {
    float:left;
    width:100%;
    background:red;
}

通过相对定位将容器移动到位

使用相对定位，我们现在将容器移动到它们的新位置。当每个容器移动时，div 在下面可见。彩色容器的分层和位置创建了等高柱的背景。container2 div 向左移动 30% 以显示绿色右侧列， container1 div 向左移动 40% 以显示黄色中心列，同时仍然可见的红色部分成为左列。

列颜色

CSS 相对定位规则

这是添加的 CSS 行，显示了相对定位的添加。

#container2 {
    position:relative;
    right:30%;
}
#container1 {
    position:relative;
    right:40%;
}

将内容移回每一列

接下来要做的是将每列的内容移回页面上，使其与下面的列背景颜色对齐。这也是通过简单的相对定位来完成的。

内容

最后我们通过添加一个溢出来切断悬垂的容器：隐藏；规则在最外面的容器 - container3。

在此处输入图像描述

这是我现在将代码集成到其中的初始布局：JFiddle 示例

在这个 JFiddle 示例中没有解决的一件事是分隔符。目前我认为将分隔符添加为内容的阴影而不是放在一边。这比另一个 div 更容易创建。

来源：等高列跨浏览器 css 没有 hacks

于 2013-02-26T17:35:05.250 回答
0

您可以尝试这样做：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
            * {
              margin: 0;
              padding: 0;
            }

            body {
              background-color: #ebebeb;
            }

            #wrapper {
              width: 1000px;
              margin-left: auto;
              margin-right: auto;
            }

            #content_wrapper {
              width: 1000px;
              margin: 90px auto 90px;
              background-color: #fff;
            }

            #content_wrapper aside {
              display: table-cell;
              width: 200px;
              padding: 10px;
              box-shadow: inset -8px 0 10px -6px #ddd;
            }

            #content {
              display: table-cell;
              width: 760px;
              padding: 10px;
            }
    </style>
</head>
<body>
    <div id="wrapper">
        <header>
            <nav>
                <!--My nav here-->
            </nav>
        </header>
        <div id="content_wrapper">
            <aside>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere sodales ante id facilisis. Vestibulum euismod mattis nisl, id consequat tortor suscipit vitae. Maecenas sit amet dolor nibh. Quisque vitae commodo augue. Nullam bibendum posuere est, non gravida ante lacinia quis. Vestibulum imperdiet orci eu nisl posuere a gravida orci ullamcorper. Nullam quis lacus ipsum.
                </p>
            </aside>
            <div id="content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere sodales ante id facilisis. Vestibulum euismod mattis nisl, id consequat tortor suscipit vitae. Maecenas sit amet dolor nibh. Quisque vitae commodo augue. Nullam bibendum posuere est, non gravida ante lacinia quis. Vestibulum imperdiet orci eu nisl posuere a gravida orci ullamcorper. Nullam quis lacus ipsum.
                </p>
            </div><!-- #content -->

            </div>
        </div>
    </div>
</body>
</html>

删除了绝对定位#content_wrapper并添加了边距以确保底部始终有一些空间。除此之外，aside它#content会像表格单元格一样显示 - 这可能不适用于某些较旧的浏览器（即 IE 较旧版本），因此它可能不适合您，具体取决于您想要支持的浏览器。

于 2013-02-26T17:01:04.500 回答