我使用引导程序来创建主页,其中包含我构建的小标题和侧栏。我希望身体都是一个身高。 我原本是用overflow: hidden
写的,但我不想那样做,因为内容会在较小的屏幕上被推下页面,我希望观众能够查看它们。 目前,该页面的底部如下所示:with the light green extending further than the sidebar。无论窗口大小如何,我都希望它们的高度相同。我注意到,这似乎很明显,浅绿色延伸的头数相同,但因为它是一个响应式布局,所以这个数量会发生变化。 我试图使用display: flex
无济于事,我试过表格布局,我试图设置高度为特定的值,这也不起作用。 的HTML:引导程序甚至列高度
<div class="container-fluid">
<div class="row" id="headers">
<div class="menu col-xs-3">
<div>
<div class="col-xs-12 menu-item"><a id="about-me-nav">About Me</a></div>
<div class="col-xs-12 menu-item"><a>Portfolio</a></div>
<div class="col-xs-12 menu-item"><a href="./resume.html">Resume</a></div>
<div class="col-xs-12 menu-item"><a>Contact</a></div>
</div>
</div>
<div class="col-xs-9 main">
<h1>Header</h1>
</div>
<div class="col-xs-9 content auto-content-div">
</div>
和CSS:
body, html {
height: 100%;
width: 100%;
}
#headers, .container-fluid {
height: 100%;
}
.menu {
background: url("http://www.space.com/images/i/000/041/737/original/milky-way-chile-praniski.jpg") no-repeat;
height: 100%;
}
.main {
background-color: #021615;
text-align: center;
}
.menu-item:first-child {
padding-top: 4.5em;
}
.menu-item {
padding-top: 4em;
text-align: center;
}
.content {
height: 100%;
background-color: rgba(12, 122, 86, 0.32) ;
}
请帮助!
可能的重复[如何使Bootstrap列高度相同?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-高度) – A1raa
我花了数小时查看堆栈溢出问题,正如我在这里提到的那样,该答案无效。 – ctaylor