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

时间：2013-02-26 04:15:12

标签： html css html5 css3 sidebar

我迷失在这一点上。经过无数个小时的搜索和尝试，我还没有找到一个有效的解决方案。

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

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

    4. 一些注意事项：

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

    • 当将位置改为相对位置时，页面会按原样扩展。虽然第三点不再适用。

    • 尚未找到第一个解决方案。

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

    的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 

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

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

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

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

    非常感谢任何帮助。

2 个答案:

答案 0 :(得分：8)

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

enter image description here

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

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

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

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

Container div explained

三栏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

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

#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将从底部的容器中伸出，容器将没有正确的高度。实际上，在这个例子中，如果没有浮动，容器的最高高度为零。

添加额外的嵌套容器

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

Initial layout

三栏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％以显示黄色中间列，同时仍然可见的红色部分变为左栏。

Column colors

CSS相对定位规则

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

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

将内容移回每列

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

Content

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

enter image description here

这是我将在现在整合代码的初始布局：JFiddle example

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

来源：Equal height columns cross browser css no hacks

答案 1 :(得分：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旧版本），因此它可能不适合您，具体取决于您想要的浏览器支持。

相关问题
最新问题