固定位置填充div

Question

固定位置填充div

3

我有一个网页，我希望所有元素都固定在原位，这样整个页面就没有滚动条。我有一个标题、一个左侧菜单和一个区域，该区域显示图形，直接在图形下方应该是一个列表。

标题和图形区域之间有一个间隙，我无法去掉它。我的外边距和内边距已经设置为0。

此外，绘图应占据标题下方空间的60%，列表占据40%，但两个元素都不正确，两个元素的垂直位置都明显高于页面底部。

html,
body {
  margin: 0;
  padding: 0;
}
.float {
  width: 100%;
  background-color: blue;
  padding-top: 60px;
  display: flex;
  display: -webkit-flex;
}
.main_title {
  width: 70%;
  height: 60px;
  display: flex;
  display: -webkit-flex;
  flex-wrap: nowrap;
  flex-flow: column;
  justify-content: center;
  background-color: red;
}
.clock {
  width: 30%;
  height: 60px;
  background-color: green;
}
.header {
  display: -webkit-flex;
  display: flex;
  height: 60px;
  position: fixed;
  width: 100%;
  background-color: red;
  margin: 0;
}
.menu {
  width: 130px;
  flex: 0 0 130px;
  background-color: yellow;
  height: 100%;
  position: fixed;
}
.column_main {
  flex: 1;
  background-color: purple;
  padding-left: 130px;
  float: right;
}
.plot-wrapper {
  width: 100%;
  background-color: brown;
  height: 60%;
}
#list {
  background-color: lightblue;
  width: 100%;
  height: 40%;
  position: fixed;
}

<body>
  <div class="header">
    <div class="header">
      <div class="main_title">title</div>
      <div class="clock">time</div>
    </div>
  </div>
  <div class="float">
    <nav class="menu">
      <p>menu</p>
    </nav>
    <div class="column_main">
      <div class="plot-wrapper">
        <p>plot wrapper</p>
      </div>
      <div id="list">
        <p>list</p>
      </div>
    </div>

  </div>
</body>

- Brecky Morris

我有一个网页，我希望所有元素都固定在原位，这样整个页面就不会出现滚动条。 - onetwo12

在 plot-wrapper 中，您需要设置

p {display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px;}

的 margin: 0。 - onetwo12

关于高度，由于您的父容器.float没有设置高度，因此.plot-wrapper的height: 60%不起作用。 - abhishekkannojia

你正在寻找“flexbox圣杯布局”，在谷歌上搜索，你会得到很多例子... - Rene van der Lende

嗨。我研究了圣杯布局，我认为我复制了其中一些内容，但是将中央内容（在圣杯示例中）分成两个不同大小的部分让我感到困惑。我认为Marc的解决方案看起来正是我需要的。谢谢你的帮助。 - Brecky Morris

3个回答

0

这里有一个plunker，下面是一小段代码片段：

html,
body {
  box-sizing: border-box;
  font: 400 16px/1.5'Palatino Linotype';
  width: 100vw;
  height: 100vh;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  color: #111;
  background-color: lightblue;
  font-variant: small-caps;
  font-size: 1rem;
}
.shell {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}
.core {
  width: calc(100% - 130px);
  height: calc(100% - 60px);
  background-color: blue;
  left: 130px;
  top: 60px;
  position: fixed;
}
.title {
  width: 70%;
  line-height: 1;
  vertical-align: central;
  background-color: red;
  position: fixed;
  top: 14px;
}
.clock {
  width: 30%;
  height: 60px;
  background-color: lime;
  position: fixed;
  right: 0;
  top: 0;
}
header {
  height: 60px;
  width: 100%;
  background-color: red;
  top: 0;
  left: 0;
  z-index: 11;
  position: fixed;
}
.menu {
  width: 130px;
  background-color: yellow;
  height: calc(100% - 60px);
  top: 60px;
  left: 0;
  position: fixed;
}
.plot {
  width: calc(100% - 130px);
  background-color: brown;
  height: calc(60% - 30px);
  top: 60px;
  left: 130px;
  position: fixed;
}
#list {
  background-color: lightblue;
  width: calc(100% - 130px);
  height: calc(40% - 30px);
  bottom: 0;
  left: 130px;
  padding: 20px;
  position: fixed;
}
#list dd {
  text-indent: 20px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <section class="shell">
    <header class="header">

      <h1 class="title">title</h1>
      <h3 class="clock">time</h3>

    </header>

    <nav class="menu">
      <h3>Menu</h3>
    </nav>
    <main class="core">
      <section class="plot">
        <h2>plot wrapper</h2>
      </section>

      <dl id="list">
        <dt>List Section</dt>
        <dd>List Item</dd>
        <dd>List Item</dd>
        <dd>List Item</dd>
        <dd>List Item</dd>
        <dd>List Item</dd>
      </dl>
    </main>


  </section>
</body>

</html>

- zer00ne

0

我稍微修改了你的代码，但是在你的解释中我有些困惑，所以我就这样做了。如果我错了，我道歉，但是嘿，我尽力了。 :D

HTML:

<div id="page">
    <header class="main-hdr">
        <div>
            <h1>Title</h1>
        </div>
        <div>00:00:00</div>
    </header>
    <main class="main-content">
        <nav>
            <ul>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
            </ul>
        </nav>
        <section>
            <h2>Plot</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. 
            </p>
        </section>
        <aside>
            <h3>Lists</h3>
            <ul>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
            </ul>
    </main>
</div>

CSS：

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);

* {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', 'DejaVu Sans', sans-serif;
}


body {
    text-align: center;
    background-color: #fff;
    color: #000;
    font-size: 100%;
    overflow: hidden; /*prevent scrollbars*/
}

header, main, section, aside, nav {
    display: block;
}

#page,
.main-hdr {
    width: 100%;
    clear: both;
    margin: 0 auto;
    overflow: hidden;
}

.main-hdr {

    display: flex;
}

.main-hdr div {
    float: left;
}

.main-hdr div:first-child {
    background-color: #aa0b6b;
    width: 80%;
}

.main-hdr div:last-child {
    width: 20%;
    background-color: #20aa5c;
}

.main-content {
    clear: both;
}

.main-content nav {
    float: left;
    width: 20%;
}

.main-content section {
    width: 60%;
    float: left;
}

.main-content aside {
    width: 20%;
    float: left;
}

结果：

示例

- Uniforlyff

感谢您的尝试，如果我让您感到困惑，我很抱歉。我希望列表直接出现在图表下面，也就是说，在窗口左侧有一个垂直菜单（从标题下方延伸到页面底部）。然后是一个图表，直接在其下方是一个列表，占据除标题或菜单以外的所有空间（图表和列表组合将从标题直接下方延伸到页面底部）。图表和列表都会从左侧的菜单水平延伸到窗口的右侧。我不知道这是否能够澄清问题。 - Brecky Morris

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marc Audet · Accepted Answer

如果我理解正确的话，以下是一种不涉及使用 flex 的做法。

在头部中，我使用浮动将两个元素并排放置。

然后使用绝对定位创建 .float 面板，通过调整顶部偏移量将其顶边设置在 header 正下方，并将所有其他偏移量设置为零，从而将其拉伸到全宽和全高。

接着，使用绝对定位将 .menu 放置在左侧，占据块的左侧 130px 宽度，然后类似地创建 .column_main 块，以占据剩余的空间。

在 .column_main 中，我将 .plot-wrapper 和 #list 保持为常规流动元素，并将它们的高度分别设置为 60% 和 40%。我添加了 overflow: auto，以防止任何外边距（例如 p 元素）折叠并创建不需要的空白。

html, body {
  margin: 0;
  padding: 0;
}
.header {
  height: 60px;
  background-color: red;
  overflow: auto;
}
.main_title {
  float: left;
  width: 70%;
  height: 60px;
  background-color: red;
}
.clock {
  float: left;
  width: 30%;
  height: 60px;
  background-color: green;
}
.float {
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  bottom: 0;
}
.menu {
  background-color: yellow;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 130px;
}
.column_main {
  position: absolute;
  left: 130px;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: purple;
}
.plot-wrapper {
  overflow: auto;
  background-color: brown;
  height: 60%;
}
#list {
  overflow: auto;
  background-color: lightblue;
  height: 40%;
}

<div class="header">
  <div class="main_title">title</div>
  <div class="clock">time</div>
</div>
<div class="float">
  <nav class="menu">
    <p>menu</p>
  </nav>
  <div class="column_main">
    <div class="plot-wrapper">
      <p>plot wrapper</p>
    </div>
    <div id="list">
      <p>list</p>
    </div>
  </div>
</div>