1. 首頁
  2. 問答
  3. 使用CSS劃分兩個塊的頁面高度

使用CSS劃分兩個塊的頁面高度

2017-06-20 51 views
1

我有兩個塊：標頭.AccountInfo和內容.DebitsAndCredits。它們都應該劃分頁面的高度，並且應該可以滾動到.DebitsAndCredits。滾動控件應該在.DebitsAndCredits塊內部可見，我試圖做到這一點，但我不知道如何做到這一點沒有JS，但我認爲這可能只使用CSS。使用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的底部到頁面的底部。

來源

2017-06-20 rel1x

回答

2

您可以使用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 -->HTB00
 
       <!-- /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>

來源

2017-06-20 16:53:35 LGSon

+0

太謝謝你了！ – rel1x

0

如果修復的.AccountInfo高度（在我的例子150像素），可以使用height: calc(100% - 150px)爲.DebitsAndCredits ，加起來高達100％。

但是，你需要添加兩兩件事：margin: 0和height: 100%爲html和body，和margin-top: 0你的第一個p標籤。

最後一個比較棘手：.AccountInfo沒有任何margin-top，但它從第一個p元素（由於「摺疊邊距」現象）得到默認頂邊距。如果設置爲0，整個事情的作品......

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; 
 
}
<div class="AccountInfo"> 
 
    <p class="AccountInfo-name">Joe Doe</p> 
 
    <p> 
 
    <!-- react-text: 5 -->IBAN: 
 
    <!-- /react-text --> 
 
    <!-- react-text: 13 -->HTB00
 
    <!-- /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>

來源

2017-06-20 17:17:18 Johannes

相關問題

 相關問題