將滾動添加到CSS網格佈局中的每一列

Question

我想在我的網格佈局中的每個列上單獨滾動。

目前，我正在開發一個移動唯一的Web應用程序。我想爲縱向和橫向使用不同的網格佈局。

縱向方向只是1列，每個元素都在另一個之後。這裏沒問題。

在橫向方向上，我想使用2列。我的全部內容顯示在左側，我的導航移動到右側。現在我希望兩個部分都有一個單獨的滾動條。有沒有辦法來實現這個？如果當前列的內容結束，滾動應該停止。

守則CodePen：https://codepen.io/SuddenlyRust/pen/rmJOqV

.grid-container { 
 
    display: grid; 
 
    grid-template-columns: 1fr; 
 
    grid-template-rows: 1fr; 
 
    grid-gap: 15px 0; 
 
} 
 

 
header { 
 
    background-color: green; 
 
    grid-column: 1; 
 
    grid-row: 1 
 
} 
 

 
main { 
 
    background-color: blue; 
 
    grid-column: 1; 
 
    grid-row: 2; 
 
} 
 

 
nav { 
 
    background-color: pink; 
 
    grid-column: 1; 
 
    grid-row: 3; 
 
} 
 

 
footer { 
 
    background-color: teal; 
 
    grid-column: 1; 
 
    grid-row: 4; 
 
} 
 

 
@media only screen and (orientation: landscape) { 
 
    .grid-container { 
 
    grid-template-columns: 5fr 4fr; 
 
    } 
 
    nav { 
 
    grid-column: 2; 
 
    grid-row: 1/span 3; 
 
    } 
 
    footer { 
 
    grid-row: 3; 
 
    } 
 
} 
 

 
h1 { 
 
    min-height: 200px; 
 
}

<div class="grid-container"> 
 
    <header> 
 
    <h1>Logo</h1> 
 
    </header> 
 
    <main> 
 
    <h1>content</h1> 
 
    </main> 
 
    <nav> 
 
    <h1>Navigation</h1> 
 
    </nav> 
 
    <footer> 
 
    <h1>Footer</h1> 
 
    </footer> 
 
</div>

非常感謝您的寶貴時間！

Answer 1

在橫向方向上，我想使用2列。我的全部內容顯示在左側，我的導航移動到右側。現在我希望兩個部分都有一個單獨的滾動條。有沒有辦法來實現這個？如果當前列的內容結束，滾動應該停止。

在左邊的列中，您有三個獨立的電網項目：header，main和footer元素。

在右欄中有一個網格項：nav元素。

向左列添加滾動條–縱向或橫向–不可行，因爲有三個單獨的元素。您需要將所有元素都包裝在一個容器中以便單個滾動條工作。

向右列添加滾動條–縱向或橫向–非常容易，因爲只有一個元素。

假設你是在談論一個垂直滾動條，這裏是使它工作的一種方式：

body { 
 
    margin: 0; 
 
} 
 

 
.grid-container { 
 
    display: grid; 
 
    grid-template-columns: 1fr; 
 
    grid-template-rows: 1fr; 
 
    grid-gap: 15px 0; 
 
    height: 100vh; 
 
} 
 

 
header { 
 
    background-color: green; 
 
    grid-column: 1; 
 
    grid-row: 1 
 
} 
 

 
main { 
 
    background-color: blue; 
 
    grid-column: 1; 
 
    grid-row: 2; 
 
} 
 

 
nav { 
 
    background-color: pink; 
 
    grid-column: 1; 
 
    grid-row: 3; 
 
    overflow: auto; 
 
} 
 

 
footer { 
 
    background-color: teal; 
 
    grid-column: 1; 
 
    grid-row: 4; 
 
} 
 

 
@media only screen and (orientation: landscape) { 
 
    .grid-container { 
 
    grid-template-columns: 5fr 4fr; 
 
    grid-template-rows: 1fr 1fr 1fr; 
 
    } 
 
    nav { 
 
    grid-column: 2; 
 
    grid-row: 1/span 3; 
 
    } 
 
    footer { 
 
    grid-row: 3; 
 
    } 
 
}

<div class="grid-container"> 
 
    <header> 
 
    <h1>Logo</h1> 
 
    </header> 
 
    <main> 
 
    <h1>content</h1> 
 
    </main> 
 
    <nav> 
 
    <h1>Navigation<br><br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br></h1> 
 
    </nav> 
 
    <footer> 
 
    <h1>Footer</h1> 
 
    </footer> 
 
</div>

revised codepen

---

爲CSS網格瀏覽器支持

• 鉻 - 完全支持如2017年3月8日（版本57）
• 火狐 - 完全支持如2017年3月6日（版本52）
• 的Safari - 完全支持如2017年3月26日（的版本10。1）
• Edge - 截至2017年10月16日的全面支持（版本16）
• IE11 - 不支持當前規範;支持過時版本

下面是完整的畫面：http://caniuse.com/#search=grid

Answer 2

這裏是一個my answer on your earlier question擴展版本，如何獲得滾動兩個頭/內容/主導航使用flexbox。

Fiddle demo

棧片斷

(function(d, timeout) { 
 
    window.addEventListener("load", function() { 
 
    resizeHandler(); 
 
    }, false); 
 

 
    window.addEventListener("resize", function() { 
 
    if (!timeout) { 
 
     timeout = setTimeout(function() { 
 
     timeout = null; 
 
     // do resize stuff 
 
     resizeHandler(); 
 
     }, 66); 
 
    } 
 
    }, false); 
 

 
    function resizeHandler() { 
 
    if (window.innerHeight < window.innerWidth) { 
 
     if (!(d.body.classList.contains('landscape'))) { 
 
     d.body.classList.add('landscape'); 
 
     d.body.appendChild(d.querySelector('nav')); 
 
     } 
 
    } else { 
 
     if (d.body.classList.contains('landscape')) { 
 
     d.body.classList.remove('landscape') 
 
     d.querySelector('section').appendChild(d.querySelector('nav')); 
 
     } 
 
    } 
 
    } 
 
}(document));

html, body { 
 
    margin:0; 
 
} 
 
header, footer, main, nav { 
 
    margin: 5px; 
 
    padding: 5px; 
 
    border-radius: 5px; 
 
    min-height: 120px; 
 
    border: 1px solid #eebb55; 
 
    background: #ffeebb; 
 
} 
 
footer { 
 
    order: 2; 
 
} 
 
nav { 
 
    order: 1; 
 
} 
 
section { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
@media only screen and (orientation: landscape) { 
 

 
    main div { 
 
    height: 400px; 
 
    border: 1px dashed red; 
 
    } 
 
    nav div { 
 
    height: 800px; 
 
    border: 1px dashed red; 
 
    } 
 

 
    body.landscape { 
 
    display: flex; 
 
    } 
 
    section { 
 
    display: block; 
 
    width: calc(60% - 10px);   /* 10px is for the margin */ 
 
    box-sizing: border-box; 
 
    max-height: calc(100vh - 20px); 
 
    overflow: auto; 
 
    } 
 
    nav { 
 
    width: calc(40% - 10px);   /* 10px is for the margin */ 
 
    box-sizing: border-box; 
 
    max-height: calc(100vh - 20px); 
 
    overflow: auto; 
 
    } 
 
}

<section> 
 
    <header>header</header> 
 
    <main>content 
 
    <div> 
 
     This div get a height when in landscape to show scroll in section 
 
    </div> 
 
    </main> 
 
    <footer>footer</footer> 
 
    <nav>navigation 
 
    <div> 
 
     This div get a height when in landscape to show scroll in nav 
 
    </div> 
 
    </nav> 
 
</section>