유연한 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 높이 주요 내용

답변

관련 문제