Question

我正在制作布局。

我有两个左列，不是从文档的顶部开始。

HTML：

<div id="site-logo">logo</div>
<section id="left-column">
    <nav>nav</nav>
</section>
<header>header</header>
<main id="main-section">
    <section id="second-left-column">
        <nav id="sub-nav">sub nav</nav>
    </section>
    <section id="content">content</section>
</main>

的CSS：

body { position: relative; }

header { 
    background-color:red;
    height: 50px;
}
#left-column {
    position: absolute;
    width: 150px;
    background-color:black;
    height: 100%;
    min-height: 100%;
    top:100px;    
    bottom: 0px;
}
#site-logo {
  width: 150px;
  height: 100px;
  background-color:yellow;
  position: absolute;

}
#second-left-column{
  width: 150px;
  position: absolute;
  height: 100%;
  min-height: 100%;
  background-color:grey;
  top: 25px;
}
#main-section {
  margin-left: 150px;
  position: relative;
  height: 100%;
  min-height: 100%;
}
#content {
  margin-left:150px;
  background-color: blue;
  min-height: 800px;
}

There is the Fiddle

我希望两个列都以文档末尾结尾，与内容（蓝色）在同一行（与蓝色相同）

如何避免不同的保证金底部？

如果需要，我可以将标识（黄色）放在列内。我们必须保持布局中的白色奇怪空间

Answer 1

尝试为所有div添加换行div并将其设置为overflow:hidden，请参阅https://jsfiddle.net/jm4j9h04/4/

<div style="overflow:hidden;">        
<div id="site-logo">logo</div>
        <section id="left-column">
            <nav>
                nav
            </nav>
        </section>
        <header>
            header
        </header>
        <section id="main-section">

            <section id="second-left-column">
                <nav id="sub-nav">
                    sub nav
                </nav>
            </section>
            <section id="content">
                content
            </section>

        </section>
</div>

body {   position: relative;}

header { 
    background-color:red;
    height: 50px;
}
#left-column {
    position: absolute;
    width: 150px;
    background-color:black;
    top:100px;    
    bottom: 0px;
}
#site-logo {
  width: 150px;
  height: 100px;
  background-color:yellow;
  position: absolute;

}
#second-left-column{
  width: 150px;
  position: absolute;
  height: 100%;
  min-height: 100%;
  background-color:grey;
  top: 65px;
}
#main-section {
  margin-left: 150px;
  position: relative;
  height: 100%;
  min-height: 100%;
}
#content {

  margin-left:150px;

  background-color: blue;
  min-height: 800px;

}

绝对全高和底边距

1 个答案: