フレキシブルなdivの高さメインコンテンツ

私はブートストラップを使ってウェブページを作成しました。メインコンテンツの設定に問題があります。私は高さを％で指定し、最小の高さを指定しました。しかし、メニュー項目をクリックし、jquery load（）を使用してhtmlページをロードすると、divの場所はメインページと他のページの間を移動します。フレキシブルなdivの高さメインコンテンツ

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

がどのように私はこの問題を解決しなければならない。ここで

は私のメインページのコードですか？私はこれを引き起こしているものを得ることができません。

私は現在のビューを表示するためにこのウェブサイトをホストしました。 http://sampledreamstore.000webhostapp.com

出典

2017-03-13 kromastorm

これはmargin collapseと呼ばれます。 .contentの最初の子はstrongで、これは余白がないため、ホームページのコンテンツ領域での通常の動作（余白の崩壊なし）が表示されます。しかし、他のページでは、.contentの最初の子はh2であり、親の外側では大きなトップマージンが崩壊しています。

修正するには、サブページのh2のmargin-topを削除し、一貫性のあるpadding-topを.contentに置き換えます。また、サブページにあるように、すべてのページでh2を使用することもできます。または、padding: 1pxまたはborder: 1px transparentを.contentに適用すると、余白の崩壊が無効になり、.contentの内部に保持されます。

出典

2017-03-13 16:51:09

ありがとうございました。これらの変更により私のウェブページが更新されます。 – kromastorm

可能であれば、寸法を変更することなく、コンテンツ領域にすべてのページコンテンツをどのように調整できるか教えてください。 – kromastorm

@kromastormあなたはどういう意味ですか？ページのコンテンツの量が異なります。コンテンツエリアのサイズを変更する代わりに、何をしたいですか？ –

フレキシブルなdivの高さメインコンテンツ

答えて

関連する問題