스크롤바가없는 유연한 높이의 div 2 개

저는 웹 페이지가 페이지 하단 (바닥 글까지)과 스크롤바가없는 2 개의 div로 구성되도록 노력하고 있습니다. 예를 들면 다음과 같습니다. http://hoskyns50.co.uk/about-hoskyns-50th/ 스크롤바를 제거하고 div와 페이지를 확장하려면 (이 웹 사이트와 마찬가지로) 흰색 배경의 내용과 사이드 바 div가 페이지 전체를 바닥 글에 표시합니다.스크롤바가없는 유연한 높이의 div 2 개

관련 CSS :

body, html { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    top: 0px; 
    min-height: 100%; 
    height: 100%; 
    line-height: 1; 
    } 
body { 
    min-height: 100%; 
    height: 100%; 
    font-family: 'Century Gothic', sans-serif; 
    font-size: 13px; 
    line-height: 21px; 
    background: #e0d6b6 url(images/bg.png) repeat-x; 
    color: #2f2f2f; 
    -webkit-font-smoothing: antialiased; 
    -webkit-text-size-adjust: 100%; 
    } 
.container { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    top: 0px; 
    width: 100%; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    background: transparent; 
    margin: 0 auto -30px; 
    padding: 0px; 
    } 
.contentwrapper { 
    position: relative; 
    display: block; 
    min-height: 100%; 
    height: 100%; 
    margin: 0 5%; 
    } 
#content, #sidebar { 
    position: relative; 
    padding: 20px; 
    background: #ffffff; 
    min-height: 100% !important; 
    height: 100%; 
    display: block; 
    position: relative; 
    overflow: auto; 
    margin-bottom: auto; 
    } 
#content { 
    min-width: auto; 
    width: auto; 
    } 
#sidebar { 
    margin-left: 2% !important; 
    width: 150px; 
    float: right; 
    }#footer, #push { 
    clear: both; 
    } 
#footer { 
    display: block; 
    bottom: 0px !important; 
    position: relative; 
    width: 100%; 
    margin: 0; 
    padding: 10px 0; 
    font-size: 12px;  
    border: none; 
    background: #808080; 
    color: #c4c4c4; 
    vertical-align: middle; 
    }

관련 HTML CSS 사용의 상단이 CSS 리셋에서

<html> 
<head> 
</head> 
<body> 
<div class="container"> 
<div class="contentwrapper"> 
<div id="sidebar"> 
sidebar 
</div><!--sidebar--> 
<div id="content">  
content 
</div><!--content--> 
</div><!--contentwrapper--> 
<div id="push"></div> 
<div id="footer"> 
footer 
</div> <!--footer--> 
</div><!--container--> 
</body> 
</html>

출처

2013-07-08 user2561163

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

것은이 정확해야 :

body { 
    min-height: 100%; 
    font-family: 'Century Gothic', sans-serif; 
    font-size: 13px; 
    line-height: 21px; 
    background: #e0d6b6 url(images/bg.png) repeat-x; 
    color: #2f2f2f; 
    -webkit-font-smoothing: antialiased; 
    -webkit-text-size-adjust: 100%; 
} 
body, html {height: 100%; } 
.container { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    top: 0px; 
    width: 100%; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    background: transparent; 
    margin: 0 auto -30px; 
    padding: 0px; 
    } 
.contentwrapper { 
    position: relative; 
    display: block; 
    min-height: 100%; 
    height: 100%; 
    margin: 0 5%; 
    } 
#content, #sidebar { 
    position: relative; 
    padding: 20px; 
    background: #ffffff; 
    min-height: 100% !important; 
    height: 100%; 
    display: block; 
    position: relative; 
    overflow: auto; 
    margin-bottom: auto; 
    } 
#content { 
    min-width: auto; 
    width: auto; 
    } 
#sidebar { 
    margin-left: 2% !important; 
    width: 150px; 
    float: right; 
    }#footer, #push { 
    clear: both; 
    } 
#footer { 
    display: block; 
    bottom: 0px !important; 
    position: relative; 
    width: 100%; 
    margin: 0; 
    padding: 10px 0; 
    font-size: 12px;  
    border: none; 
    background: #808080; 
    color: #c4c4c4; 
    vertical-align: middle; 
}

당신의 CSS에서3210

출처

2013-07-08 16:56:36

안녕하세요, 답장을 보내 주셔서 감사합니다. 위의 CSS를 편집했지만 내용 표시 줄에 여전히 스크롤바가 표시됩니까 ?? 다른 아이디어? http://hoskyns50.co.uk/about-hoskyns-50th/ <- 직접 확인하십시오. – user2561163

은 변경 :

#content, #sidebar { 
    position: relative; 
    padding: 20px; 
    background: #ffffff; 
    min-height: 100% !important; 
    height: 100%; 
    display: block; 
    position: relative; 
    overflow: auto; 
    margin-bottom: auto; 
    }

에 : 단지 overflow 값이 변경되었습니다

#content, #sidebar { 
    position: relative; 
    padding: 20px; 
    background: #ffffff; 
    min-height: 100% !important; 
    height: 100%; 
    display: block; 
    position: relative; 
    overflow: hidden; 
    margin-bottom: auto; 
    }

참고.

출처

2013-07-08 17:15:29 EmmanuelRC

답장을 보내 주셔서 감사합니다. 이미 시도했지만 이미 방문자가 각 페이지의 모든 정보를보고 싶습니다. 오버플로를 숨김으로 변경하면 대형 페이지에서 정보의 절반을 볼 수 없다는 것을 의미합니다. 다른 아이디어는 무엇입니까? – user2561163

그 이유는'height'를 100 %로 설정하고, 같은 섹션에서'auto'로 그리고'.contentwrapper'에서도 변경하기 때문입니다. 차이점을 보게 될 것입니다. – EmmanuelRC

나는 또한 그것을 시도했지만 높이를 자동으로 만들 때 div는 페이지의 아래쪽으로 늘어나지 않습니다. – user2561163

스크롤바가없는 유연한 높이의 div 2 개

답변

관련 문제