Question

昨天在我的主页上终于让“圣杯”布局正常工作......我试图在弹出窗口中嵌入一个“圣杯”而没有太大的成功。我有两个核心问题。

1）尽管父母有一个明确的身高，但Popup-holy圣杯不会占据100％的高度。

2）这可能适用于所有弹出窗口，但如果我将弹出窗口设置为100％宽度和100％高度，则尝试对其应用填充...它只是将弹出窗口向右移动，但不会考虑到考虑适当的宽度。这很烦人......我发现这个使用翻译的黑客：（ - 50％， - 50％）..但它不太相同...我希望能够设置边距/填充在我的弹出窗口上32px并让它工作（像一个理智的人认为它会工作）。下面的代码演示了这个问题。圣杯的弹出版本不会延伸到底部，如果你试图设置边距，它就不会像一个理智的人那样表现。

我想让这个工作，因为基本上，我想要制作的每一页都是这个的变体，加上或减去不同的部分。如果我能做到这一点，那么理论上我应该可以对布局做任何事情。

提前致谢！

代码：

body {
  display: flex;
  flex-direction: column;
  color: white;
  background-color: black;
}

.flexcolumncontainer {
  display: flex;
  flex-direction: column;
}

.flexrowcontainer {
  display: flex;
  flex-direction: row;
}

.absolutepositioned {
  left: 0;
  top: 0;
  position: absolute;
  background-color: #00ffff;
  color: black;
}

.layout__body {
  display: flex;
  flex: 1;
}

.layout__content {
  flex: 1;
  overflow: auto;
}

.layout__columns {
  flex: 0 0 12em;
}

.layout__nav {
  order: -1;
  position: relative;
}

.layout__aside {
  position: relative;
}


/*assign this style to a flex item to fix STUUUPID positioning problems with relative positions*/


/*you can set style="somestyle someotherstyle flexfixpos"*/

.fixflex {
  position: relative;
}

.layout__content {
  background: orange;
  position: relative;
}

.layout__columns {
  background: green;
}

header,
footer {
  background: #000;
  color: #fff;
  padding: 10px;
  position: relative;
}

footer a {
  flex: 1;
}

h1 {
  margin: 0;
  font-size: 15px;
}

body.fillbrowser,
html.fillbrowser {
  height: 100%;
  margin: 0;
  font-family: Helvetica;
}

.popup {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  padding: 32px 32px 32px 32px;
}

<!DOCTYPE html>
<![p]template="none" />
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="HolyGrail.css">
    </head>
    <body>
    <style>
        body, html {
          height: 100%;
          margin: 0;
          font-family: Helvetica;
        }
    </style>
      <header>
        <h1>FLEXBOX LAYOUT PROOF OF CONCEPT</h1>
      </header>
      <div class="layout__body">
        <main class="layout__content">
           	<div class="absolutepositioned">For the body</div>
            <div style="color: #00FFFF;"><b>absolute positioned stuff</b></div>
        </main>
        <nav class="layout__nav layout__columns">
            NAV ITEMS<br>
            NAV ITEMS<br>
            NAV ITEMS<br>
            NAV ITEMS<br>
            NAV ITEMS<br>
            NAV ITEMS<br>
            NAV ITEMS<br>
            NAV ITEMS<br>
            NAV ITEMS<br>
            NAV ITEMS<br>
           	<div class="absolutepositioned">For the NaV</div>
        </nav>
        <aside class="layout__aside layout__columns">YOUR VIAGRA ADS HERE
           	<div class="absolutepositioned">absolute right bar</div>
        </aside>
      </div>
      <footer> <div class="absolutepositioned">FOOTER</div>
      </footer>
        <div class="popup">
            <div class="fillpopup">
                <div class="flexcontainer">
                  <header>
                    <h1>THIS IS A POP-UP THAT IS ALSO FLEX BUT SHOULD TAKE UP ENTIRE HEIGHT</h1>
                  </header>
                  <div class="layout__body">
                    <main class="layout__content">
                        <div class="absolutepositioned">For the body</div>
                        <div style="color: #00FFFF;"><b>the blue box should be here</b></div>
                    </main>
                    <nav class="layout__nav layout__columns">
                        NAV ITEMS<br>
                        NAV ITEMS<br>
                        NAV ITEMS<br>
                        NAV ITEMS<br>
                        NAV ITEMS<br>
                        NAV ITEMS<br>
                        NAV ITEMS<br>
                        NAV ITEMS<br>
                        NAV ITEMS<br>
                        NAV ITEMS<br>
                        <div class="absolutepositioned">For the NaV</div>
                    </nav>
                    <aside class="layout__aside layout__columns">YOUR VIAGRA ADS HERE
                    <div class="absolutepositioned">absolute right bar</div>
                    </aside>
                  </div>
                  <footer> <div class="absolutepositioned">FOOTER</div>
                  </footer>
                </div>
            </div>
        </div>
    </body>
    </html>

Answer 1

.popup {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: calc(100% - 64px);
  padding: 32px;
  box-sizing: border-box;
}

适合我，但你必须给所有孩子

height: 100%;

这使得div.popup全屏，除了顶部和底部的32px填充对我来说。我猜这就是你想要的，对吗？

Answer 2

因此，如果我正确地理解了您，我不确定我是谁，您希望在您的页面布局上弹出一个填充视口并在内容过长时滚动的弹出窗口？

如果那是对的，那么这样的事情可能会让你开始：

＆＃13;

html,
body {
  margin: 0;
}

.wrapper {
  display: flex;  
  flex-flow: row wrap;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
}

.main,
.aside {
  min-height: calc( 100vh - 100px );
}

.main {
  background: deepskyblue;
}

.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

.popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}

@media all and (min-width: 600px) {
  .aside { flex: 1 0; }
}

@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

＆＃13;

<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="whatever.css" />
</head>

<body>

<!-- Bottom layer -->
<div class="wrapper">

    <header class="header">
        Header
    </header>

    <article class="main">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
    </article>

    <aside class="aside aside-1">
        Aside 1
    </aside>

    <aside class="aside aside-2">
        Aside 2
    </aside>

    <footer class="footer">
        Footer
    </footer>

</div>
	
<!-- Popup -->
<div class="wrapper popup">

    <header class="header">
        Popup Header
    </header>

    <article class="main">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
    </article>

    <aside class="aside aside-1">
        Popup Aside 1
    </aside>

    <aside class="aside aside-2">
        Popup Aside 2
    </aside>

    <footer class="footer">
        Popup Footer
    </footer>

</div>
	
</body>

</html>

＆＃13;

这是基于Chris Coyier在this page上的示例，因此设计也是响应式的。我所做的就是将position: fixed应用于弹出窗口，将其附加到视口的所有边，然后设置overflow: auto。如果您想要使用position: absolute，那么您仍然可以使用bottom: 0, top: 0, left: 0, right: 0来拉伸它以填充其容器。

如果你想要页眉和页脚的固定高度，你可以这样做（正如我在上面的例子中所使用的那样）：

.main, aside {
  min-height: calc(100vh - 100px);
}

flexbox - 圣杯页面内的圣杯弹出窗口

2 个答案: