html定位的问题 - 旁边，页脚，填充

Question

I'm so lost on this one. 我迷失在这一点上。 With countless hours of searching and trying, I haven't gotten a working solution. 经过无数个小时的搜索和尝试，我还没有找到一个有效的解决方案。

I'm having problems with achieving all of the following three points at the same time: 我在同时实现以下三点时遇到问题：

Get some padding at the bottom. 底部有一些填充物。 (When content gets longer, then eventually there is no empty space at the bottom.) （当内容变长时，最终底部没有空白区域。）
Get both left-and-right side to expand together with the longest content 左右两侧与最长内容一起展开
when aside is shorter than main content, then the separator line should still be from top to bottom. 当旁边比主要内容短时，分隔线应该仍然是从上到下。

Some notes: 一些说明：

Currently, third point is working. 目前，第三点正在发挥作用。
When changing aside's position to relative, then the page extends as it should. 当将位置改为相对位置时，页面会按原样扩展。 although third point then doesn't work anymore. 虽然第三点不再适用。
Haven't found any solution for the first one yet. 尚未找到第一个解决方案。

Here is a scaled down version of my layout. 这是我的布局的缩小版本。 Since all problems still exist in this little amount of code, then this is probably enough: 由于所有问题仍然存在于少量代码中，因此这可能就足够了：

index.html 的index.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>

style.css style.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;
}

I'm quite sure that this needs to be built again from scratch. 我很确定这需要从头开始重新构建。

But before I can successfully do that I would like to understand the cause of my problems and is this maybe easily solvable? 但在我成功地做到这一点之前，我想了解我的问题的原因，这可能很容易解决吗？

Or in other words what is the best/working way to achieve this layout, so that everything would expand correctly and so that there can still be padding at the bottom? 或者换句话说，实现这种布局的最佳/工作方式是什么，以便一切都能正确扩展，以便底部仍然可以填充？

Any help is very much appreciated. 很感谢任何形式的帮助。

Answer 1

This was actually really similar to my problem, although I didn't realize it: 这实际上与我的问题非常相似，虽然我没有意识到：

在此输入图像描述

Separating the column content from it's background colour 将列内容与其背景颜色分开

The first step to solving the equal height problem is to break it into smaller pieces that can be solved separately. 解决等高问题的第一步是将其分解成可以单独求解的较小块。 The way we do this is to use two divs for each column instead of one. 我们这样做的方法是为每列使用两个div而不是一列。 The first div will be used to hold the content and the other will be used as the background colour. 第一个div用于保存内容，另一个用作背景颜色。 This separation gives us individual control over these elements plus we can put them together in a more useful way. 这种分离使我们能够单独控制这些元素，并且我们可以以更有用的方式将它们组合在一起。 This will all become clear shortly. 这很快就会变得清晰。

A floated container div will always be the height of it's floated contents 浮动的容器div将始终是浮动内容的高度

This is the central principle behind this equal column height method. 这是这种等柱高法的核心原则。 The only way to make the height of a div equal to the tallest column is if that div contains all the columns. 使div的高度等于最高列的唯一方法是该div是否包含所有列。 So to explain this another way, by placing the columns inside a container we cause the container to be the height of the tallest column. 因此，为了解释另一种方法，通过将列放在容器内，我们使容器成为最高列的高度。 This is a very useful structure. 这是一个非常有用的结构。

容器div解释

Three column HTML div structure 三列HTML div结构

In the example above the three content columns are inside a container div. 在上面的示例中，三个内容列位于容器div中。

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

Three column CSS 三栏CSS

And here is the CSS that forces the container div to the height of the longest column. 这里是强制容器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;
}

For this structure to work correctly in all browsers the container div must be floated (left or right) plus each of the column content divs must also be floated, it does not matter which way. 为了使这个结构在所有浏览器中正常工作，容器div必须浮动（左或右）加上每个列内容div也必须浮动，无论哪种方式都无关紧要。 The process of floating the content divs makes them line up horizontally across the page. 浮动内容div的过程使它们在页面上水平排列。 Floating the container makes it stretch down to the height of the tallest column inside. 浮动容器使其延伸到内部最高柱的高度。 If we don't float the container then the content divs will stick out of the container at the bottom and the container won't have the correct height. 如果我们没有浮动容器，那么内容div将从底部的容器中伸出，容器将没有正确的高度。 Actually in this example the container will end up with a height of zero if it is not floated. 实际上，在这个例子中，如果容器没有浮动，容器的最高高度为零。

Adding extra nested containers 添加额外的嵌套容器

The next step to equal height columns is to add extra containers so they are nested inside each other. 等高柱的下一步是添加额外的容器，使它们彼此嵌套。 We need the same number of containers as we do columns - three. 我们需要与列相同数量的容器 - 三个。 These three containers are going to be the backgrounds of each column. 这三个容器将成为每列的背景。 Notice that we have removed the background colours from the original columns and added them to the containers. 请注意，我们已从原始列中删除了背景颜色，并将它们添加到容器中。

初始布局

Three column HTML div structure 三列HTML div结构

The two extra containers have been added to the HTML below. 这两个额外的容器已添加到下面的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>

Three column CSS 三栏CSS

All the elements are floated to the left and the containers have a width set to 100% so they stay the full width of the page. 所有元素都浮动到左侧，容器的宽度设置为100％，因此它们保持页面的整个宽度。 The background colours have been removed from the content divs and added to the containers. 背景颜色已从内容div中删除并添加到容器中。

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

Moving the containers into place with relative positioning 将容器移动到相对定位的位置

Using relative positioning we now move the containers to their new locations. 使用相对定位，我们现在将容器移动到新位置。 When each container is moved the divs become visible below. 当移动每个容器时，div在下面可见。 It is the layering and position of the coloured containers that create the background of the equal height columns. 它是彩色容器的分层和位置，可以创建相等高度列的背景。 The container2 div is moved to the left by 30% to reveal the green right-hand column and the container1 div is moved to the left 40% to reveal the yellow center column and at the same time the red section that is still visible becomes the left-hand column. container2 div向左移动30％以显示绿色右侧列，container1 div向左移动40％以显示黄色中间列，同时仍然可见的红色部分变为左栏。

列颜色

The CSS relative positioning rules CSS相对定位规则

Here is the added CSS lines showing the the addition of relative positioning. 这是添加的CSS线，显示相对定位的添加。

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

Moving the content back into each column 将内容移回每列

The next thing to do is to move the content of each column back onto the page so that it aligns with the column background colour underneath. 接下来要做的是将每列的内容移回页面，使其与下面的列背景颜色对齐。 Again this is done with simple relative positioning. 这也是通过简单的相对定位完成的。

And then finally we chop off the overhanging containers by adding an overflow:hidden; 最后，我们通过添加溢出来隐藏突出的容器：隐藏; rule on the outermost container - container3. 规则在最外面的容器 - container3。

在此输入图像描述

This is the initial layout where I will integrate my code in now: JFiddle example 这是我将在现在集成代码的初始布局： JFiddle示例

One thing which isn't solved in this JFiddle example is the separator. 在这个JFiddle示例中没有解决的一件事是分隔符。 Currently I thought adding the separator as drop shadow to the content instead of aside. 目前我认为将分隔符作为投影添加到内容而不是放在一边。 Which would be easier to create than another div. 哪个比另一个div更容易创建。

Source: Equal height columns cross browser css no hacks 来源：等高的列跨浏览器css没有黑客

Answer 2

You could try doing it like this: 你可以尝试这样做：

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

Absolute positioning in #content_wrapper was removed and margins were added to make sure there's always some space at the bottom. 删除了#content_wrapper中的绝对定位并添加了边距以确保底部始终有一些空格。 Besides that aside and #content are being displayed like table cells - this might not work in some older browsers (namely IE older versions), so it might not be suitable for you, depending on what browsers you want to support. 除此之外aside和#content被显示成表格单元格-这可能不是在一些旧的浏览器（IE，即旧版本）的工作，所以它可能不适合你，取决于你要支持哪些浏览器。

html定位的问题 - 旁边，页脚，填充

问题描述

2 个解决方案

解决方案1
8 已采纳 2013-02-26 17:35:05

解决方案2
0 2013-02-26 17:01:04

html定位的问题 - 旁边，页脚，填充

问题描述

2 个解决方案

解决方案1 8 已采纳 2013-02-26 17:35:05

解决方案2 0 2013-02-26 17:01:04

解决方案1
8 已采纳 2013-02-26 17:35:05

解决方案2
0 2013-02-26 17:01:04