圣杯布局与100%高度

Question

圣杯布局与100%高度

12

我正在尝试制作一个类似于这样的CSS布局：

enter image description here

这种类型的布局在CSS中被称为“圣杯布局”。我遇到的问题是，当我使用在线找到的布局和解决方案时，无法按照我的要求正确地工作。我正在尝试制作一个页面，无论内容如何，都会将页脚放置在浏览器底部，并向下延伸列。到目前为止，我只看到过页脚放置在内容停止处的页面，结果是页脚下面有一些空白空间。

如果有人能帮助我解决这个问题，我将不胜感激！

- Henrik Skogmo

你想要的是什么和http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm之间有什么区别？ - Gaurav

1

区别在于，在matthewjamestaylor.com的解决方案中，页面在窗口之前停止（如果删除文本），例如http://oi55.tinypic.com/ezhbvb.jpg。这导致浏览器窗口底部出现一些不必要的空白区域。我希望页面没有那个空白空间，所以即使页面上的内容不够多，列也需要延伸到底部。 - Henrik O. Skogmo

5个回答

5

已经是2020年了，怎么不试试Grid呢？

 body {
    display: grid;
    height: 100vh;
    grid-template: auto 1fr auto / auto 1fr auto;
  }

  header {
    grid-column: 1 / 4;
  }

  .left-sidebar {
    grid-column: 1 / 2;
  }

  main {
    grid-column: 2 / 3;
    overflow: auto;
  }

  .right-sidebar {
    grid-column: 3 / 4;
  }

  footer {
    text-align: center;
    grid-column: 1 / 4;
  }
   
  html, body {
      margin: 0;
      padding: 0;
      background-color: #aed9e0;
  }

  body > * {        
    outline: 1px dashed #247ba0;
  }

  .left-sidebar, .right-sidebar, main, header, footer {
    padding: 2rem;
  }

<body>
  <header><strong>Header</strong></header>
  <div class="left-sidebar">Left Sidebar</div>
  <main contenteditable>
     Main Content
     <ul>
       <li>Item 1</li>
       <li>Item 2</li>
     </ul>
  </main>
  <div class="right-sidebar">Right Sidebar</div>
  <footer>Footer Content</footer>
</body>

- Alex Nolasco

0

请参见这个技巧以获取顶部/底部，然后将侧边栏放在其中。甚至在 IE6 中也可以使用 :p

- Phrogz

啊，那些是静态的顶部和底部。我要找的是一个包括顶部和底部在滚动中的布局，如果你懂我的意思的话 :) - Henrik O. Skogmo

@HenrikSkogmo，我不知道你的意思。请详细说明如何处理比浏览器窗口更短或更长的内容。 - Phrogz

这是一个例子，http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm。这个布局的问题在于，如果你删除了三列的文本，你会得到一个看起来像这样的页面，http://oi55.tinypic.com/ezhbvb.jpg。我希望这些列能够延伸到页面底部与页脚一起。 :-) - Henrik O. Skogmo

1

@HenrikSkogmo，你并没有完全回答我提出的问题。如果你的意思是“窗口”，请使用“window”这个词。同时，请具体说明如何处理列长超过内容和短于内容的情况。（这样就有四个问题需要你澄清了。） - Phrogz

-1

这似乎大部分都能满足你的需求。 http://www.savio.no/examples/three-column-layout-6.asp 它使用了一个虚假的100%高度列，除了三个列之外。

- Gaurav

经过一些实验和测试，伪列是真正令人头痛的东西。有很多层和 div(isions)。看起来神圣的杯子有两条不同的道路。感谢解决方案！但我担心我更喜欢无形内容的方式。 - Henrik O. Skogmo

-2

请使用以下内容来设置两个侧边栏：

padding-bottom:9999px;
margin-bottom:-9999px;

这将创建“不可见”的内容，使侧边栏可以延伸到底部（负边距“规范化”了侧边栏的尺寸，以便在侧边栏上进行的计算仍然是有意义的）。

- Madison Caldwell

顺便说一句，如果你的页面足够长，这将会出现问题。我不确定这些值可以有多大，但如果必要的话，你可以测试更大的值... - Madison Caldwell

使用这种方法更加简洁，但有点不可靠和“有限”。但是如果数字足够大且内容管理得当，这将对我有利。谢谢！ - Henrik O. Skogmo

1

我完全无法让它工作。你能详细解释一下该怎么做吗？（这是我所能达到的程度。）（http://jsfiddle.net/VHc4a/） - sdleihssirhc

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

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

- Scott Weaver · Accepted Answer

在2017年，你可以通过flexbox相当优雅和容易地实现这种布局：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
header {
  flex: 0 0 100px;
  background-color: #C14F4F;
}
main {
  flex: 1;
  display: flex;
  background-color: #699EBD;
}
footer {
  flex: 0 0 40px;
  background-color: #C14F4F;
}
.left, .right {
  flex: 0 2 150px;
  background-color: #C28282;
}
.middle {
  flex:1 1 300px;
}

<header></header>
<main>
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</main>
<footer></footer>