如何使一個固定大小的div和其他div佔據所有剩餘的空間？

Question

我對web開發（.NET）非常陌生。也許這個問題早些時候問過，但我沒有找到適合我的要求的解決方案。我有一個帶有橫幅和右側邊欄的母版頁，可以通過所有子頁面繼承。這裏是我的母版頁設計代碼：

<div id="topContent">.......</div> 
<div> 
<div id="rightContent" style="position: relative; float: right !important;">......</div> 
<div id="mainContent" style="position: static;"> 
    <asp:ContentPlaceHolder id="MainContent" runat="server"> 
    </asp:ContentPlaceHolder>  
</div> 
</div> 

但是這個設計代碼不能完全按照我想要的完全工作。這是我的需求設計： 母版頁設計的圖像

我怎麼能實現這個使用bootstrap和CSS？任何建議或鏈接明顯。謝謝

Answer 1

1.您可以使用自舉網格系統類以及。 這裏是鏈接：https://getbootstrap.com/docs/3.3/examples/grid/

2.添加了一個片段，我沒有引導相同。注意：我已經根據附件假定了高度和寬度。但是，您可以指定自己的高度和寬度。

#topContent { 
 
width:100%; 
 
    background:blue; 
 
    padding:10px 10px; 
 
    text-align: center; 
 
    border: 2px solid black; 
 
} 
 
#rightContent { 
 
position: absolute; 
 
    right: 0px; 
 
    width: 20%; 
 
    display: inline-block; 
 
    background: blue; 
 
    min-height: 104px; 
 
    top: 50px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    border: 2px solid black; 
 
} 
 
#MainContent { 
 
background: orange; 
 
    display:inline-block; 
 
    width:100%; 
 
    border:2px solid black; 
 
    min-height:204px; 
 
    text-align:center; 
 
}

<div id="topContent">Master page banner</div> 
 
<div> 
 
<div id="rightContent">Mater page sidebar</div> 
 
<div id="mainContent"> 
 
    <asp:ContentPlaceHolder id="MainContent" runat="server"> 
 
     <p>Child page content</p> 
 
    </asp:ContentPlaceHolder>  
 
</div> 
 
</div>

Answer 2

1.Bootstrap實施

您可以使用引導爲this.This提供的網格佈局會給你一個負責任的設計了。

<div> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-sm-12"> 
      <header>Master page banner</header> 
     </div> 
    </div> 

    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-sm-8"> 
       <article>child page content</article> 
      </div> 
      <div class="col-sm-4"> 
       <aside>Master page sidebar</aside> 
      </div> 
     </div> 
    </div> 
<div> 

https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp https://getbootstrap.com/docs/4.0/layout/grid/

，並作爲「...的橫幅，並且可以通過所有子頁面繼承右邊欄」我希望你說的是單頁application.To做到這一點你可以使用JSON/XML文件填充您的子頁面內容塊（這是我在上面給出的示例中的文章選項卡），而您的邊頁面和橫幅元素保持不變。

https://tutorialzine.com/2015/02/single-page-app-without-a-framework

我希望這有助於：）

CSS實現（易&簡單）

header { 
 
    height: 20px; 
 
    border: 1px solid black; 
 
} 
 

 
div { 
 
    height: 500px; 
 
    border: 1px solid black; 
 
    width: 100%; 
 
} 
 

 
aside { 
 
    height: 200px; 
 
    width: 25%; 
 
    border: 1px solid black; 
 
    float: right; 
 
}

<header>Master Page banner</header> 
 
<div> 
 
    Child Page content 
 
    <aside>Master Page sidebar</aside> 
 
</div>