Question

鉴于以下小提琴：

我要做的是让第一列垂直展开以占据剩余的垂直空间。基本上我希望所有列的右边界相等。

我是一个相对的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>

Answer 1

将display: block替换为display: flex #wallPopsMenuItem:hover #wallDecorSubMenu，并从float: left删除height: 100%，.subMenu .subMenuColumn。

Updated JSFiddle

CSS菜单布局 - 让div占用剩余的垂直空间

1 个答案: