Question

我有两个块：标题.AccountInfo和内容.DebitsAndCredits。它们都应该划分页面的高度，.DebitsAndCredits应该是可滚动的。滚动控件应该在.DebitsAndCredits块内部可见，我尝试这样做，但我不知道如何在没有JS的情况下做到这一点，但我认为只使用CSS就可以实现。

我在这里发布了我的例子：http://jsbin.com/peqetoseyi/1/edit?html,css,output（对不起，HTML在这里不干净，我只是复制了我的反应应用程序的编译HTML）

有我的问题：

.DebitsAndCredits {
  padding-top: 20px;
  padding-bottom: 20px;
  overflow: scroll;
  height: 300px;
}

我应该在没有height: 300px;的情况下这样做。该块的高度应该从.AccountInfo的底部到页面底部。

Answer 1

您可以使用Flexbox并执行此操作（请参阅CSS中的注释）

body {
  margin: 0;
  font-family: sans-serif;
}

.App {
  display: flex;                 /*  added  */
  flex-direction: column;        /*  added - stacked vertical  */
  height: 100vh;                 /*  added - full height */
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.DebitsAndCredits {
  flex: 1 0;                     /*  added - keep half height  */
  padding-top: 20px;
  padding-bottom: 20px;
  overflow: auto;
}
.DebitsAndCreditsItem {
  padding: 20px;
}
.DebitsAndCreditsItem-name {
  font-size: large;
}

.AccountInfo {
  flex: 1 0;                     /*  added - keep half height  */
  overflow: hidden;              /*  hide if content exceed element  */
  padding: 20px;
  border-bottom: 1px solid;
}
.AccountInfo-name {
  font-size: large;
}

.text-muted {
  color: #636c72;
}
.text-success {
  color: #5cb85c;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>

<body>
    <div data-reactroot="" class="App">
        <div class="AccountInfo">
            <p class="AccountInfo-name">Joe Doe</p>
            <p>
                <!-- react-text: 5 -->IBAN:
                <!-- /react-text -->
                <!-- react-text: 13 -->HTB0001234567
                <!-- /react-text --><br>
                <!-- react-text: 7 -->Balance:
                <!-- /react-text -->
                <!-- react-text: 14 -->3133.56
                <!-- /react-text --><br>
                <!-- react-text: 9 -->Currency:
                <!-- /react-text -->
                <!-- react-text: 10 -->EURO
                <!-- /react-text --><br></p>
        </div>
        <div class="DebitsAndCredits">
            <div class="DebitsAndCreditsItem">
                <div class="DebitsAndCreditsItem-name">
                    <!-- react-text: 17 -->Wendy
                    <!-- /react-text -->
                    <!-- react-text: 18 -->,
                    <!-- /react-text -->
                    <!-- react-text: 19 -->
                    <!-- /react-text --><span class="text-success">+10.5</span></div><span class="text-muted">Diner</span><br><span class="text-muted">10 January 2016, 12:20 pm</span><br></div>
            <div class="DebitsAndCreditsItem">
                <div class="DebitsAndCreditsItem-name">
                    <!-- react-text: 27 -->Danny
                    <!-- /react-text -->
                    <!-- react-text: 28 -->,
                    <!-- /react-text -->
                    <!-- react-text: 29 -->
                    <!-- /react-text --><span class="text-success">+10.5</span></div><span class="text-muted">Diner</span><br><span class="text-muted">10 January 2016, 12:14 pm</span><br></div>
            <div class="DebitsAndCreditsItem">
                <div class="DebitsAndCreditsItem-name">
                    <!-- react-text: 37 -->Joe's Pizza
                    <!-- /react-text -->
                    <!-- react-text: 38 -->,
                    <!-- /react-text -->
                    <!-- react-text: 39 -->
                    <!-- /react-text --><span class="">-31.5</span></div><span class="text-muted">134678943.88</span><br><span class="text-muted">10 January 2016, 1:23 am</span><br></div>
            <div class="DebitsAndCreditsItem">
                <div class="DebitsAndCreditsItem-name">
                    <!-- react-text: 47 -->Northwind Industries
                    <!-- /react-text -->
                    <!-- react-text: 48 -->,
                    <!-- /react-text -->
                    <!-- react-text: 49 -->
                    <!-- /react-text --><span class="text-success">+2310.7</span></div><span class="text-muted">Salary January</span><br><span class="text-muted">9 January 2016, 7:00 pm</span><br></div>
            <div class="DebitsAndCreditsItem">
                <div class="DebitsAndCreditsItem-name">
                    <!-- react-text: 57 -->Coffee and Cakes
                    <!-- /react-text -->
                    <!-- react-text: 58 -->,
                    <!-- /react-text -->
                    <!-- react-text: 59 -->
                    <!-- /react-text --><span class="">-2.5</span></div><span class="text-muted">468832.99</span><br><span class="text-muted">8 January 2016, 11:14 am</span><br></div>
            <div class="DebitsAndCreditsItem">
                <div class="DebitsAndCreditsItem-name">
                    <!-- react-text: 67 -->Albert Heijn
                    <!-- /react-text -->
                    <!-- react-text: 68 -->,
                    <!-- /react-text -->
                    <!-- react-text: 69 -->
                    <!-- /react-text --><span class="">-76.65</span></div><span class="text-muted">489923982.45</span><br><span class="text-muted">7 January 2016, 10:30 pm</span><br></div>
            <div class="DebitsAndCreditsItem">
                <div class="DebitsAndCreditsItem-name">
                    <!-- react-text: 77 -->Shoes and Jackets
                    <!-- /react-text -->
                    <!-- react-text: 78 -->,
                    <!-- /react-text -->
                    <!-- react-text: 79 -->
                    <!-- /react-text --><span class="">-89</span></div><span class="text-muted">567222.67</span><br><span class="text-muted">7 January 2016, 9:29 pm</span><br></div>
            <div class="DebitsAndCreditsItem">
                <div class="DebitsAndCreditsItem-name">
                    <!-- react-text: 87 -->NS Railways
                    <!-- /react-text -->
                    <!-- react-text: 88 -->,
                    <!-- /react-text -->
                    <!-- react-text: 89 -->
                    <!-- /react-text --><span class="">-12.2</span></div><span class="text-muted">89357483.76</span><br><span class="text-muted">7 January 2016, 1:45 pm</span><br></div>
        </div>
    </div>
</body>

</html>

Answer 2

如果您修正了.AccountInfo的高度（在我的示例中为150px），则可以height: calc( 100% - 150px)使用.DebitsAndCredits，最高可达100％。

但是，您还需要为margin: 0和height: 100%以及html添加另外两项内容：body和margin-top: 0。{{1} }标签

最后一个相当棘手：p没有任何margin-top，但它从第一个.AccountInfo元素获得默认的上边距（由于＆＃34;利润率下降＆＃34;）。如果你把它设置为0，那么整个事情都有效......

＆＃13;

html,
body {
  margin: 0;
  height: 100%;
}

.AccountInfo {
  height: 150px;
}

.DebitsAndCredits {
  height: calc(100% - 150px);
  overflow-y: auto;
}
.AccountInfo p:first-of-type {
  margin-top: 0;
}

＆＃13;

使用CSS

2 个答案: