CSS菜單佈局 - 讓DIV佔用剩餘的垂直空間

什麼，我希望做的是有第一列，以垂直擴展佔用其餘的垂直空間。基本上我希望右邊框在所有列上都是平等的。

我是一個相對的CSS /前端新手。任何想法如何我可以得到這個固定起來？

全部下面的代碼：

<html><head></head><body class="Body" onload="checkCookie()"> 
    <div id="Container"> 
       <div id="menu" class="clearfix"> 
        <div class="menuItem" id="wallPopsMenuItem"> 
         <a href="/wall-pops.aspx"> 
          <div class="area">peel &amp; stick</div> 
          <div class="category">Wall Decals</div> 
         </a> 
         <div class="subMenu" id="wallDecorSubMenu"> 
          <div class="subMenuColumn"> 
           <div class="inner"> 
            <div><a href="/" class="title">All Products</a></div> 
            <div><a href="/new-wall-decals.aspx" class="title">New</a></div> 
            <div><a href="/" class="title">Popular</a></div> 
            <div><a href="/discount-wallpops.aspx" class="title">On Sale</a></div> 
           </div> 
          </div> 
          <div class="subMenuColumn"> 
           <div class="inner"> 
            <div class="title">Wallpops</div> 
            <div> 
             <ul> 
              <li><a href="/">All Wallpops</a></li> 
              <li><a href="/wall-art-kits.aspx">Wall Art Kits</a></li> 
              <li><a href="/kids-wallpops.aspx">Wall Art for Kids</a></li> 
              <li><a href="/wallpops-baby.aspx">Wall Art for Nursery</a></li> 
              <li><a href="/dots-blox-stripes.aspx">Dot, Blox, Stripes</a></li> 
              <li><a href="/nuwallpaper.aspx">NuWallpaper</a></li> 
              <li><a href="/room-dividers.aspx">Room Dividers</a></li> 
              <li><a href="/room-panels.aspx">Decorative Room Panels</a></li> 
              <li><a href="/dry-erase.aspx">Dry-Erase Decals</a></li> 
              <li><a href="/chandeliers.aspx">Chandeleiers</a></li> 
              <li><a href="/trophy-heads-modern-animal-bust.aspx">3-D Animal Heads</a></li> 
              <li><a href="/hard-boards.aspx">Hard Boards</a></li> 
              <li><a href="/jewel-wallpops.aspx">Jewel Accented</a></li> 
             </ul> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       </div> 
<style type="text/css"> 
body { color: #333; font-family: Gill Sans MT, Verdana, Arial, sans-serif; font-size: small; margin: 0 auto; text-align: left;position: relative;} 
#Container { max-width: 960px;margin: 0 auto; } 
.subMenu{padding: 5px;font-family: Arial;font-size: 9pt;text-transform: lowercase;background: white;display: none;position: absolute;z-index: 1;text-align: left;margin-left: 20px;box-shadow: 5px 5px 10px rgba(102, 102, 102, .7);} 
#wallPopsMenuItem:hover #wallDecorSubMenu{ display: block;} 
#dryEraseMenuItem:hover #dryEraseSubMenu{ display: block;} 
.subMenu div, li{ padding: 2px 5px 0 0;} 
.subMenu ul{ list-style: none;padding-left: 10px;margin: 0;} 
.subMenu .subMenuColumn{float: left;height: 100%;} 
.subMenu .inner{border-right: 1px solid #6a033d;height: 100%;padding: 0 10px 0 10px;} 
.subMenu .shopBy{height: 100%;border-right: none;margin-left: 20px;min-width: 275px;} 
.subMenu .title{ text-transform: uppercase;} 
#menu{ position: relative;margin-top: 30px;} 
#menu .menuItem{ float: left;width: calc(100%/6);text-align: center;} 
#menu .area{ color: #e86d1f;font-family: Arial;font-size: 10pt;text-transform: lowercase;} 
#menu .category{color: #e86d1f;font-family: Arial;font-size: 11pt;font-weight: bold;text-transform:uppercase;} 

.clearfix::after { 
    content: " "; 
    display: block; 
    height: 0; 
    clear: both; 
} 
</style></body></html>

來源

2017-02-24 Jim B

更換display: block與display: flex爲#wallPopsMenuItem:hover #wallDecorSubMenu和.subMenu .subMenuColumn刪除float: left，height: 100%。

Updated JSFiddle

來源

2017-02-24 14:18:51

太棒了！再次感謝！ –

CSS菜單佈局 - 讓DIV佔用剩餘的垂直空間

回答

相關問題