如何让一个 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.添加了一个 sn-p，我在没有引导程序的情况下也做了同样的事情。注意：我根据附件假设了高度和宽度。但是，您可以指定自己的高度和宽度。

#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实现

您可以为此使用引导程序提供的网格布局。这也将为您提供响应式设计。

<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/

至于“...可以由所有子页面继承的横幅和右侧边栏”，我希望您指的是单页面应用程序。要实现这一点，您可以使用 JSON/XML 文件来填充您的子页面内容块（这是我上面给出的示例中的文章选项卡），而您的侧页和横幅元素保持不变。

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

我希望这会有所帮助：)

1. 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>