Question

我使用Bootstrap进行双列html设置：

for i in data.find_all("quot"):

我不明白为什么我的第二个.leftSide div没有使用我目前拥有的CSS样式达到其父行的全部高度：

<div class="container-fluid">
<div class="row fullHeight">
    <div class="col-sm-3 col-lg-2">
        <nav class="navbar navbar-default navbar-fixed-side">
            <img src="assets/images/favicon.ico" class="logo">
            <ul>
                <li><a href="#">Getting Started</a></li>

                <li class="subLi"><a href="#">API Credentials</a></li>
                <li class="subLi"><a href="#">Authentication</a></li>
                <li class="subLi"><a href="#">Best Practices</a></li>
                <li class="subLi"><a href="#">Pagination</a></li>
                <li class="subLi"><a href="#">Rate Limits</a></li>
                <li class="subLi"><a href="#">Time</a></li>
                <li class="subLi"><a href="#">Webhooks</a></li>

                <li><a href="#">API Reference</a></li>

                <li class="subLi"><a href="#">Lock</a></li>
                <li class="subLi"><a href="#">LockCommand</a></li>
                <li class="subLi"><a href="#">LockEvent</a></li>
                <li class="subLi"><a href="#">OAuth Token</a></li>
                <li class="subLi"><a href="#">User</a></li>

            </ul>
        </nav>
    </div>
    <div class="col-sm-9 col-lg-10">

        <div class="row">
            <div class="col-sm-6 col-lg-6 leftSide">
                <h1>Description</h1>
                <h3>Returns information about the current user</h3>
            </div>
            <div class="col-sm-2 col-lg-2 rightSide">
                <h1>Method</h1>
                <h3>Get</h3>
            </div>
            <div class="col-sm-4 col-lg-4 rightSide">
                <h1>URL</h1>
                <h3>/me</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-lg-6 leftSide">
                <h4>Request Properties</h4>
                <p>None</p>
                <h4>Response Properties</h4>
                <p>Returns a <a href="#" class="modalLink">User</a> object</p>
            </div>
            <div class="col-sm-6 col-lg-6 rightSide">
                <h4>Example Request</h4>
                <pre>GET /me</pre>
                <h4>Example Response</h4>
                <pre>HTTP/1.1 200 OK</pre>
                <pre id="_me"></pre>
            </div>
        </div>

    </div>
</div>

我可以给出一个特定的高度，但我希望它具有响应性。我已经尝试找到答案，大多数帖子说要确保父div有一个高度。我试图确保所有可能的父母都有身高，所以我错过了什么？在此先感谢您的帮助！：）

编辑***这是我当前所处位置的JS小提琴：https://jsfiddle.net/DTcHh/25309/

我现在有高度匹配，但它们占据整个页面而不是行高度最初。有没有办法解决这个问题，以便高度与行内容中最长的列相同？

Answer 1

要让.leftside达到100％的高度，您需要为所有父div设置height:100%。我将'style =“height：100％”'添加到.container-fluid，.col-sm-9 .col-lg-10尝试使用：

<style>
html, body, .row {
  height: 100%;
  margin: 0;
  padding: 0;
}
.leftSide {
  background-color: #00a3da;
  color: white;
  height: 100%;
  min-height: 100%
}

.rightSide {
  background-color: white;
  color: black;
  height: 100%;
  min-height: 100%
}

<div class="container-fluid" style="height:100%">
<div class="row fullHeight" style="height:100%">
    <div class="col-sm-3 col-lg-2">
        <nav class="navbar navbar-default navbar-fixed-side">
            <img src="assets/images/favicon.ico" class="logo">
            <ul>
                <li><a href="#">Getting Started</a></li>

                <li class="subLi"><a href="#">API Credentials</a></li>
                <li class="subLi"><a href="#">Authentication</a></li>
                <li class="subLi"><a href="#">Best Practices</a></li>
                <li class="subLi"><a href="#">Pagination</a></li>
                <li class="subLi"><a href="#">Rate Limits</a></li>
                <li class="subLi"><a href="#">Time</a></li>
                <li class="subLi"><a href="#">Webhooks</a></li>

                <li><a href="#">API Reference</a></li>

                <li class="subLi"><a href="#">Lock</a></li>
                <li class="subLi"><a href="#">LockCommand</a></li>
                <li class="subLi"><a href="#">LockEvent</a></li>
                <li class="subLi"><a href="#">OAuth Token</a></li>
                <li class="subLi"><a href="#">User</a></li>

            </ul>
        </nav>
    </div>
    <div class="col-sm-9 col-lg-10" style="height:100%">

        <div class="row">
            <div class="col-sm-6 col-lg-6 leftSide">
                <h1>Description</h1>
                <h3>Returns information about the current user</h3>
            </div>
            <div class="col-sm-2 col-lg-2 rightSide">
                <h1>Method</h1>
                <h3>Get</h3>
            </div>
            <div class="col-sm-4 col-lg-4 rightSide">
                <h1>URL</h1>
                <h3>/me</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-lg-6 leftSide">
                <h4>Request Properties</h4>
                <p>None</p>
                <h4>Response Properties</h4>
                <p>Returns a <a href="#" class="modalLink">User</a> object</p>
            </div>
            <div class="col-sm-6 col-lg-6 rightSide">
                <h4>Example Request</h4>
                <pre>GET /me</pre>
                <h4>Example Response</h4>
                <pre>HTTP/1.1 200 OK</pre>
                <pre id="_me"></pre>
            </div>
        </div>

    </div>
</div>

Answer 2

第一行是服从高度，因为你拥有相同的elements并且同一套styles。

但第二次row并非如此。您在第一列和第二列中有一组复合元素，它们具有不同的styles集，并且高度会相应变化。

建议和解决方案：

为第二个row中的两列中的元素设置样式，以确保它们的父行具有相同的高度（不好，因为它可能会导致将来出现问题）
使用JavaScript管理尺寸（不推荐，因为我们的第一种方法应该是CSS）
Flex box
让行认为它是一张桌子;将display: table设置为row，将display: table-cell设置为col-
.row-eq-height使用Flexbox
确保第一列/第二列具有预定义高度。
设置一个新课程，比如row2到第二行，然后设置min-height，如下所示

标记：

<div class="row row2">
    <div class="col-sm-6 col-lg-6 leftSide">
        <h4>Request Properties</h4>
        <p>None</p>
        <h4>Response Properties</h4>
        <p>Returns a <a href="#" class="modalLink">User</a> object</p>
    </div>
    <div class="col-sm-6 col-lg-6 rightSide">
        <h4>Example Request</h4>
        <pre>GET /me</pre>
        <h4>Example Response</h4>
        <pre>HTTP/1.1 200 OK</pre>
        <pre id="_me"></pre>
    </div>
</div>

风格：

.row2 > * {
    min-height: 190px;
}

完整加价，如果有人想要试验：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Bootstrap Height Test</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        html, body, .row {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .leftSide {
            background-color: #00a3da;
            color: white;
            height: 100%;
            min-height: 100%;
        }

        .rightSide {
            background-color: white;
            color: black;
            height: 100%;
            min-height: 100%;
        }

        .row2 > * {
            min-height: 190px;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row fullHeight">
            <div class="col-sm-3 col-lg-2">
                <nav class="navbar navbar-default navbar-fixed-side">
                    <img src="assets/images/favicon.ico" class="logo">
                    <ul>
                        <li><a href="#">Getting Started</a></li>

                        <li class="subLi"><a href="#">API Credentials</a></li>
                        <li class="subLi"><a href="#">Authentication</a></li>
                        <li class="subLi"><a href="#">Best Practices</a></li>
                        <li class="subLi"><a href="#">Pagination</a></li>
                        <li class="subLi"><a href="#">Rate Limits</a></li>
                        <li class="subLi"><a href="#">Time</a></li>
                        <li class="subLi"><a href="#">Webhooks</a></li>

                        <li><a href="#">API Reference</a></li>

                        <li class="subLi"><a href="#">Lock</a></li>
                        <li class="subLi"><a href="#">LockCommand</a></li>
                        <li class="subLi"><a href="#">LockEvent</a></li>
                        <li class="subLi"><a href="#">OAuth Token</a></li>
                        <li class="subLi"><a href="#">User</a></li>

                    </ul>
                </nav>
            </div>
            <div class="col-sm-9 col-lg-10">

                <div class="row">
                    <div class="col-sm-6 col-lg-6 leftSide">
                        <h1>Description</h1>
                        <h3>Returns information about the current user</h3>
                    </div>
                    <div class="col-sm-2 col-lg-2 rightSide">
                        <h1>Method</h1>
                        <h3>Get</h3>
                    </div>
                    <div class="col-sm-4 col-lg-4 rightSide">
                        <h1>URL</h1>
                        <h3>/me</h3>
                    </div>
                </div>
                <div class="row row2">
                    <div class="col-sm-6 col-lg-6 leftSide">
                        <h4>Request Properties</h4>
                        <p>None</p>
                        <h4>Response Properties</h4>
                        <p>Returns a <a href="#" class="modalLink">User</a> object</p>
                    </div>
                    <div class="col-sm-6 col-lg-6 rightSide">
                        <h4>Example Request</h4>
                        <pre>GET /me</pre>
                        <h4>Example Response</h4>
                        <pre>HTTP/1.1 200 OK</pre>
                        <pre id="_me"></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

Answer 3

rightSide和leftSide的所有父元素必须具有声明的高度。尝试设置高度：div上的100％

<div style="height: 100%" class="col-sm-9 col-lg-10">

Answer 4

如果我正确地理解你，那么你想要.leftSide是它的全部高度？或者你想.leftSide触摸导航栏的底部？

无论哪种方式，问题都是边缘。在你的H1上你有这样的边缘：

margin-top: 20px;
margin-bottom: 10px;

如果您将其更改为：

margin-top: 0;
margin-bottom: 10px;

你将解决第一个场景。要让leftSide触摸导航栏div，您需要删除边距：底部。如果您不想更改标题边距，可以在其周围包装div并添加足够的填充以删除空白。或者您可以选择性地定位特定的H1。

身体和html的身高100％，但我仍然无法在div上设置身高

4 个答案: