Wie macht man eine div fixed size und andere Div den gesamten verbleibenden Platz einnimmt?

Question

Ich bin sehr neu in der Web-Entwicklung (.NET). Vielleicht wurde diese Frage früher gestellt, aber ich habe keine passende Lösung für meine Anforderung gefunden. Ich habe eine Masterseite mit einem Banner und einer rechten Seitenleiste, die von allen untergeordneten Seiten erben kann. hier ist meine Masterseite Design Code:

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

Aber dieser Code für das Design nicht perfekt genau arbeiten, was ich will. Hier ist meine Anforderung Design: Bild von Masterseite Design

Wie konnte ich dies mit Bootstrap und CSS erreichen? jeder Vorschlag oder Link nennenswert. Danke

Answer 1

1.Sie können Bootstrap Grid System Klassen sowie. Hier ist der Link: https://getbootstrap.com/docs/3.3/examples/grid/

2.Added einen Ausschnitt, wo ich das gleiche ohne Bootstrap gemacht habe. Hinweis: Ich habe die Höhe und Breite basierend auf dem Anhang angenommen. Sie können jedoch Ihre eigene Höhe und Breite angeben.

#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 Implementierung

Sie das Raster-Layout durch die Bootstrap für this.This vorgesehen nutzen können, werden auch Sie ein Responsive Design geben.

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

und wie für die „... ein Banner und einen rechten Seitenleiste, die von allen untergeordneten Seite erben könnte:“ Ich hoffe, dass Sie eine einzelne Seite bedeuten Sie application.To erreichen konnte Verwenden Sie JSON/XML-Dateien zum Auffüllen Ihres untergeordneten Seiteninhaltsblocks (dies ist der Artikel in dem Beispiel, das ich oben angegeben habe), während Ihre Seiten- und Bannerelemente unverändert bleiben.

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

Ich hoffe, das hilft:)

2. CSS-Implementierung (leicht & einfach)

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>