Question

我正在使用bootstrap创建一个主页，我有一个小标题和我构建的侧边栏。我希望身体都是一个高度。我最初用operate写的，但我不想这样做，因为内容将在较小的屏幕上被推离页面，我希望观众能够查看它们。目前，页面底部如下所示：with the light green extending further than the sidebar。无论窗口大小如何，我希望它们的高度相同。我注意到的，这似乎是不言自明的，浅绿色延伸与标题相同的数量，但因为它是一个响应式布局，这个数量会改变。我试图使用$.ajax({ type:"POST", url:"/cgi-bin/myPerlScript.cgi", data:$("#myHtmlForm").serialize(), error:function badCall(){location.href="https://www.mywebsite.com/error.html";} });无效，我尝试过表格布局，我试图将高度设置为特定值，但这也无效。 HTML：

overflow: hidden

和CSS：

display: flex

请帮助！

Answer 1

答案确实有效，您可能只是不了解所使用的方法。我用你的代码把它放在笔里。

https://jsfiddle.net/51hmyjpx/3/

<div class="container-fluid">
<div class="row" id="headers">
    <div class="menu col-xs-3">
        <div class="column">
            <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 column">
    </div>

将column课程添加到div包装您想要相同高度的任何列并设置padding-bottom: 100%，然后＆＃34;欺骗浏览器＆＃34;认为他们使用margin-bottom: -100%并不高。

.column {
    padding-bottom: 100%;
    margin-bottom: -100%;
}

然后我们将overflow: hidden;添加到容器中以隐藏它。

#headers, .container-fluid {
   height: 100%;
   overflow: hidden;
}

我不确定你的代码在哪里，因为当你点击xs bootstrap视口时看起来很奇怪。您应该为导航栏指定一个最小宽度，这样它就不会缩小到小于文本占用空间的宽度，但我会留下让您自行决定。

Bootstrap甚至列高

1 个答案: