Question

我有一个网页，我希望所有元素都固定到位，这样整个页面就没有滚动条。我有一个标题，左侧的菜单，以及一个将出现情节的区域，然后在图表的正下方应该是一个列表。

我无法摆脱标题和情节区域之间的差距。我的边距和填充已经设置为0.

此外，情节应占据标题下方60％的房间和40％的列表，但两者都不正确，两个元素都在上面结束垂直页面的底部。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果我理解你的权利，以下是一种不涉及使用flex的方法。

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

然后我使用绝对定位来创建.float面板，调整顶部偏移以将顶边设置在header下方，并通过设置所有其他偏移将其拉伸到整个宽度和底部为零。

然后我使用绝对定位将.menu放在左边，占据块的左边130px宽度，然后simarly创建一个.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>

Answer 2

我改变了你的代码，但我对你的解释感到困惑，所以我做了这个，如果我不对，我道歉但是我试过了。：d

HTML：

override func gestureRecognizerShouldBegin(gestureRecognizer: UIGestureRecognizer) -> Bool {
    if gestureRecognizer is UITapGestureRecognizer {
        let location = (gestureRecognizer as! UITapGestureRecognizer).locationInView(tableView)
        var buttonFrame = CGRectMake(frame.width - 50, 0, 50, bounds.height)
        buttonFrame.origin.y = (convertRect(buttonFrame, toView: tableView).minY)

        if buttonFrame.contains(location) {
            button.sendActionsForControlEvents(.TouchUpInside)
            return false
        }
    }

    return super.gestureRecognizerShouldBegin(gestureRecognizer)
}

CSS：

idleTimerDisabled

结果：

EXAMPLE

Answer 3

以下是 plunker 以及以下代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

固定位置填补div

3 个答案: