Flexible Div Höhe Hauptinhalt

Ich habe eine Webseite mit Bootstrap erstellt. Ich habe Probleme beim Einstellen des Hauptinhaltsbereichs. Ich habe die Höhe in% und eine Mindesthöhe angegeben. Aber wenn ich auf den Menüpunkt klicke und HTML-Seiten mit jquery load() lade, bewegt sich der div-Ort zwischen der Hauptseite und anderen Seiten.Flexible Div Höhe Hauptinhalt

Hier ist meine Haupt-Seite Code:

\t $(document).ready(function() { 
 
    
 
    \t \t $(".content").load("defaultcontent.html"); 
 
    
 
    \t \t $(".about").click(function(e) { 
 
    \t \t \t $(".content").load("about.html"); 
 
    \t \t }); 
 
    
 
    \t \t $(".home").click(function(e) { 
 
    \t \t \t $(".content").load("defaultcontent.html"); 
 
    \t \t }); 
 
    
 
    \t \t $(".products").click(function(e) { 
 
    \t \t \t $(".content").load("products.html"); 
 
    \t \t }); 
 
    
 
    \t \t $(".contact").click(function(e) { 
 
    \t \t \t $(".content").load("contactus.html"); 
 
    \t \t }); 
 
    
 
    \t });

body { 
 
    \t background-image: 
 
    \t \t url("https://www.airmanchallenge.com/images/backgroundSite.jpg"); 
 
    \t color: white; 
 
    } 
 
    
 
    .navbar>a:hover { 
 
    background-color: black; 
 
    \t color: white; 
 
    } 
 
    
 
    .topnav >a:hover { 
 
    background-color: black; 
 
    \t color: white; 
 
    } 
 
    
 
    .content { 
 
    \t height: auto; 
 
    \t min-height: 400px; 
 
    }

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Sample Page</title> 
 
    <link 
 
    \t href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
 
    \t rel="stylesheet" type="text/css" /> 
 
    <script type="text/javascript" 
 
    \t src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    <script type="text/javascript" 
 
    \t src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
    <script type="text/javascript" 
 
    \t src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    
 
    
 
    </head> 
 
    <body> 
 
    \t <header class="text-center"> 
 
    \t \t <h1>ABC Store</h1> 
 
    \t \t <p>some description</p> 
 
    \t </header> 
 
    
 
    \t <nav role="navigation" class="navbar navbar-default"> 
 
    \t \t <!-- Collection of nav links and other content for toggling --> 
 
    \t \t <div id="navbarCollapse" class="collapse navbar-collapse"> 
 
    \t \t \t <ul class="nav navbar-nav topnav"> 
 
    \t \t \t \t <li><a class="home">Home</a></li> 
 
    \t \t \t \t <li><a class="products">Products</a></li> 
 
    \t \t \t \t <li><a class="contact">Contact</a></li> 
 
    \t \t \t \t <li><a class="about">About</a></li> 
 
    \t \t \t </ul> 
 
    \t \t </div> 
 
    \t </nav> 
 
    
 
    \t <div class="container"> 
 
    \t \t <div class="row"> 
 
    \t \t \t <span> 
 
    \t \t \t \t <div class="row-sm-12 row-md-12 row-lg-12 content" 
 
    \t \t \t \t \t style="background-color: lightblue;"></div> 
 
    \t \t \t </span> 
 
    \t \t </div> 
 
    \t </div> 
 
    
 
    \t <footer class="text-center"> &#169; ABC Group. All Rights 
 
    \t \t Reserved </footer> 
 
    </body> 
 
    </html>

Wie soll ich dieses Problem beheben? Ich kann nicht verstehen, was das verursacht.

Ich habe diese Website gehostet, um die aktuellen Ansichten anzuzeigen. http://sampledreamstore.000webhostapp.com

Quelle

2017-03-13 kromastorm

Dies wird genannt. Was Sie sehen, ist das normale Verhalten (keine Margin-Kollaps) im Inhaltsbereich der Homepage, da das erste Kind von .contentstrong ist, das keine Marge hat. Aber auf den restlichen Seiten ist das erste Kind von .content ein h2, das einen großen oberen Rand hat, der außerhalb des Elternteils kollabiert.

es zu beheben, ich die margin-top auf dem h2 ‚s auf den Unterseiten und sie mit einer konsequenten padding-top in .content ersetzen entfernen würde. Sie könnten auch eine h2 auf allen Seiten verwenden, die Sie auf den Unterseiten haben. Oder Sie können padding: 1px oder border: 1px transparent auf .content anwenden, wodurch der Margin-Kollaps deaktiviert und innerhalb von .content beibehalten wird.

Quelle

2017-03-13 16:51:09

Danke. Wird meine Webseite mit diesen Änderungen aktualisieren. – kromastorm

Wenn möglich, lassen Sie mich bitte wissen, wie ich meinen Inhaltsbereich so gestalten kann, dass alle Seiteninhalte ohne Dimensionsänderungen aufgenommen werden können. – kromastorm

@kromastorm was meinst du? Die Seiten haben unterschiedliche Mengen an Inhalt. Was möchten Sie statt der Größe des Inhaltsbereichs ändern? –

Flexible Div Höhe Hauptinhalt

Antwort

Verwandte Themen