簡體   English   中英

CSS 布局、頁眉、頁腳、2 列、固定 100% 高度 - 計算機上沒有垂直窗口滾動(設計器 GUI 布局)

[英]CSS layout, header, footer, 2 cols, fixed 100% height - no vertical window scrolling on computer (designer GUI layout)

編輯:以為我已經找到了我自己的純基於 flex 的解決方案,但是在中間行的導航/左側部分啟用內容滾動時存在問題。 我發布了我當前的網格解決方案,它克服了這個問題。 我已經編輯了問題以包含滾動要求。


我正在嘗試制作“設計師 GUI”布局。 它必須只能在計算機和平板電腦上使用 - 小型設備將無法使用。

該布局旨在用作網頁設計工具:

  • 計算機:[運行代碼片段以查看真實情況] 有一個全寬標題,用於保存有關正在處理的項目的信息,並且在視口底部有一個包含更多狀態信息的頁腳。 中間一行在大約 30% 的視口寬度處包含一個導航器列,右側是一個使用剩余視口寬度的預覽列。 即使導航列表很長,也不能進行頁面滾動,但導航列表的內容必須能夠垂直滾動。 例如,對大量鏈接進行成像。

  • 平板電腦:理想情況下,在橫向模式下,布局應與計算機視圖相同。 在縱向模式下,中間行中的列應該堆疊,保持與預堆疊相同的高度,現在必須允許清晰的頁面滾動。

下面的片段是我對計算機版本的嘗試。

問題

  • 目前 col1 的寬度是一個百分比,col2 的位置是相同的百分比值,給出了一個微不足道的重疊。
  • 當我們進入較小的視口時如何堆疊? 我了解斷點和媒體查詢 - 我無法得到的是如何在需要時采用固定的 100% 高度並打破它。
  • 總的來說,我覺得我應該使用 flexbox,但這對我來說是巫術!

任何人都可以幫忙嗎? 我假設這一定已經完成了,但我的網絡搜索主要是發現舊的 pre-flex hack,或者我發現的解決方案沒有提供堆棧功能。

 html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .wrapper, html, body { height: 100vh; max-height: 100vh; margin: 0; } #row1 { background-color: red; position: absolute; top: 0; left: 0; right: 0; min-height: 10vh; max-height: 10vh; } #row2 { position: absolute; top: 10vh; right: 0; left: 0; min-height: 80vh; max-height: 80vh; height: 80vh; background-color: blue; vertical-align: top; } #row3 { background-color: green; position: absolute; bottom: 0; left: 0; right: 0; min-height: 10vh; max-height: 10vh; } #col1 { background-color: yellow; width: 20%; min-height: 100%; max-height: 100%; height: 100%; position: absolute; overflow-y: hidden; } #col2 { background-color: orange; min-height: 100%; max-height: 100%; height: 100%; position: absolute; width: 80%; left: 20%; /* This is an issue as it is a problem for correct positioning */ } #content1 { height: 100%; max-height: 100%; background-color: silver; height: 100%; } #contentInner { height: 100%; max-height: 100%; min-height: 100%; overflow-y: scroll; }
 <div class="wrapper"> <div id="row1">Header</div> <div id="row2"> <div id="col1"> <div id='content1'> <div id="contentInner"> Amet nostrud amet adipisicing eu enim voluptate ipsum consequat occaecat consequat mollit tempor ut nisi. Amet aute eu ex pariatur esse in. Cillum aute aute in cillum incididunt aute dolor excepteur Lorem. Velit in incididunt nostrud magna consectetur deserunt exercitation ea. Cupidatat aliquip qui duis irure laborum ex laborum qui nulla qui adipisicing occaecat elit. Mollit qui mollit occaecat ex aliquip est. Excepteur consequat magna elit veniam dolor dolor mollit incididunt culpa cillum velit aliqua. Quis Lorem fugiat consectetur nostrud eiusmod. Eiusmod culpa excepteur nisi id qui laboris proident eu enim officia laboris deserunt laboris non. Pariatur nisi est fugiat sunt. </div> </div> </div> <div id="col2">col2</div> <div id="col3">col3</div> </div> <div id="row3">Footer</div> </div>

這是我自己使用網格而不是彈性框的答案。

我被提示這樣做是因為 flexbox 方法出現了一個新問題。 在左側/導航部分,我需要滾動內容。 盡我所能嘗試我永遠無法做到這一點 - 盡管這“可能”是由於使用 Fomantic-UI 作為內容,因為 FUI 有一些非常嚴厲和固執的 CSS。

為方便起見,請參見此處的示例: https : //jsfiddle.net/VanquishedWombat/9L57j8so/19/

總體而言,網格方法對我來說更有意義,並且似乎涉及較少的黑魔法。 該解決方案使用兩個網格 - 外部給出頁眉、中間和頁腳,然后中間包含給出兩個部分的第二個網格。 媒體查詢重新調整內部網格和單元格位置。

 // Note the JS is just for fun and not important to the grid CSS layout! var cnt = 0; $(document).ready(function() { $('body').on('click', '#cull', function() { $('.wrapper li').each(function() { cnt = cnt + 1; if (cnt > 5) { $(this).remove(); } }) }) $('body').on('click', '#add', function() { for (var i = 0; i < 10; i = i + 1) { $('ul').append($("<li>Menu Entry</li>")) } }) });
 html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .wrapper, html, body { height: 100vh; max-height: 100vh; margin: 0; } .wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: 50px auto 20px; overflow: hidden; min-height: 100vh; /* Changes in media query to double this */ max-height: 100vh; } .page-main { flex-grow: 1; /* can grow as big as needed */ overflow: hidden; /* The magic dust that is needed to make it scroll - see http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout */ } .page-header { background-color: PaleGreen; grid-column: 1 / span 1; grid-row: 1 / 1; } .page-footer { background-color: MediumSpringGreen; grid-column: 1 / span 1; grid-row: 3 / 3; } .page-content { height: 100%; grid-column: 1 / span 1; grid-row: 2 / 2; display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr; } #col1 { background-color: MediumSeaGreen; grid-column-start: 1; grid-column-end: 1; grid-row-start: 1; grid-row-end: 1; overflow: hidden; height: 100%; } #col2 { background-color: ForestGreen; grid-column-start: 2; grid-column-end: 2; grid-row-start: 1; grid-row-end: 1; } #content { max-height: 100%; background-color: silver; overflow: hidden; height: 100%; } #contentInner { height: 100%; max-height: 100%; overflow-y: auto; background-color: lime; border: 1px dotted red; } /* When we hit the small width breakpoint, double the height of the wrapper to 2 x vp height, make the page content flex wrap, and make the page content columns 100% width to force the wrap. Also noe make the page content columns 40% height to retain their original height now the patent is double height. */ @media screen and (max-width: 750px) { .wrapper { min-height: 200vh; max-height: 200vh; } .page-content { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } #col1 { grid-column-start: 1; grid-column-end: 1; grid-row-start: 1; grid-row-end: 1; } #col2 { background-color: ForestGreen; grid-column-start: 1; grid-column-end: 1; grid-row-start: 2; grid-row-end: 2; } }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <header class="page-header"> This is the top line fixed at 50px height. </header> <main class="page-main"> <div class='page-content'> <div id='col1' class='col'> <div id='content'> <div id="contentInner"> <button id='cull'> Click to cull some menu entries - border should not shrink</button> <ul> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> </ul> <button id='add'> Click to add 10 more menu entries - should enable scroll</button> </div> </div> </div> <div id='col2' class='col'> Preview content </div> </div> </main> <footer class="page-footer"> This is the footer fixed at 20px height </footer> </div>

您可以查看 flex box 和 min-width 來設置斷點。

例子:

 * { margin: 0; box-sizing: border-box; } div { height: 100vh; display: flex; flex-direction: column; } main { flex: 1; display: flex; flex-wrap: wrap; min-height: 0; overflow:auto; } aside { min-width: 200px; flex: 1; } aside, section { max-height:100%; overflow: auto; } section { min-width: 300px; flex: 3; } header, footer { background: lightblue; padding: 0.25em; } main { background: salmon; } section { background: lightgreen; }
 <div> <header> header any height <p> run me in full page to test behavior on resize</header> <main> <aside> aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>End </aside> <section> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> End </section> </main> <footer> footer any height</footer> </div>

教程/提醒: https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

這是我自己的基於 flexbox 的答案,經過一些更多的研究。

我發布了下面的代碼片段,但在這個 fiddle的版本中調整屏幕大小更容易。

我被困在左側中間列中的滾動導航內容上,這似乎違反了設置 max-height = 100% 和 overflow-y = auto/scroll 的通常規則。 最后的突破是這篇文章,它為我解決了導航欄溢出頁面並將頁腳移出視圖的問題。 [技巧是在 flex 父級上設置溢出=隱藏!]。

我使用兩個 flex 解決方案重寫了布局。 wrapper-flex 給出了三行,page-main flex 給出了中間行的列。

為了獲得小屏幕堆棧方法,媒體查詢用於:

  • 將包裝高度從 100vh(視口垂直高度的 100%)加倍到 200vh,
  • 開啟頁面主行的堆棧功能
  • 使該行中的列均為 100% 寬度以觸發換行
  • 使該行中的列具有 50% 的高度,以便它們有效地保持與以前相同。

重要提示:運行代碼片段整頁,然后按 F12 並調整頁面大小以查看以 750 像素寬度運行的斷點。

 html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .wrapper, html, body { height: 100vh; max-height: 100vh; margin: 0; } .wrapper { display: flex; flex-direction: column; min-height: 100vh; /* Changes in media query to double this */ max-height: 100vh; } .page-main { flex-grow: 1; /* can grow as big as needed */ overflow: hidden; /* The magic dust that is needed to make it scroll - see http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout */ } .page-header { background-color: PaleGreen; } .page-footer { background-color: MediumSpringGreen; } .page-content { height: 100%; width: 100%; display: flex; flex-direction: row; } #col1 { background-color: MediumSeaGreen; width: 30%; } #col2 { background-color: ForestGreen; flex-grow: 1; } #content { height: 100%; max-height: 100%; background-color: silver; } #contentInner { height: 100%; min-height: 100%; overflow-y: auto; } /* When we hit the small width breakpoint, double the height of the wrapper to 2 x vp height, make the page content flex wrap, and make the page content columns 100% width to force the wrap. Also noe make the page content columns 40% height to retain their original height now the patent is double height. */ @media screen and (max-width: 750px) { .wrapper { min-height: 200vh; max-height: 200vh; } .page-content { flex-wrap: wrap; } #col1 { width: 100%; height: 50%; } #col2 { width: 100%; height: 50%; } }
 <div class="wrapper"> <header class="page-header"> This is the top line </header> <main class="page-main"> <div class='page-content'> <div id='col1' class='col'> <div id='content'> <div id="contentInner"> <ul> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> <li>Menu Entry</li> </ul> </div> </div> </div> <div id='col2' class='col'> Preview content </div> </div> </main> <footer class="page-footer"> This is the footer </footer> </div>

重要提示:運行代碼片段整頁,然后按 F12 並調整頁面大小以查看以 750 像素寬度運行的斷點。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM