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实施

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

<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

我希望这会有所帮助：）

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>

如何使div固定大小和其他div占用所有剩余空间？

2 个答案: