CSS 사이드 바 높이 100 %
나는이 문제를 파악하기 위해 몇 시간 동안 벽에 머리를 대고 있었고 그것이 내가 놓친 작은 무언가라고 생각했습니다. 온라인으로 검색했지만 찾은 결과가없는 것 같습니다. HTML은 다음과 같습니다.
<body>
<div id="header">
<div id="bannerleft">
</div>
<div id="bannerright">
<div id="WebLinks">
<span>Web Links:</span>
<ul>
<li><a href="#"><img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/></a></li>
<li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/></a></li>
<li><a href="#"><img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/></a></li>
</ul>
</div>
</div>
</div>
<div id="Sidebar">
<div id="SidebarBottom">
</div>
</div>
<div id="NavigationContainer">
<ul id="Navigation">
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
</ul>
</div>
<div id="Main">
<!-- content -->
</div>
</body>
내 전체 CSS는 다음과 같습니다.
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Calibri, Sans-Serif;
height: 100%;
}
#header {
width: 100%;
z-index: 1;
height: 340px;
background-image: url("../../Content/images/bannercenter.gif");
background-repeat: repeat-x;
}
#header #bannerleft {
float: left;
background-image: url("../../Content/images/bannerleft.gif");
background-repeat: no-repeat;
height: 340px;
width: 439px;
z-index: 2;
}
#bannerright {
float: right;
background-image: url("../../Content/images/bannerright.gif");
background-repeat: no-repeat;
width: 382px;
height: 340px;
background-color: White;
z-index: 2;
}
#Sidebar {
width: 180px;
background: url("../../Content/images/Sidebar.png") repeat-y;
z-index: 2;
height: 100%;
position: absolute;
}
#SidebarBottom {
margin-left: 33px;
height: 100%;
background: url("../../Content/images/SidebarImage.png") no-repeat bottom;
}
#NavigationContainer {
position: absolute;
top: 350px;
width: 100%;
background-color: #bbc4c3;
height: 29px;
z-index: 1;
left: 0px;
}
#Navigation {
margin-left: 190px;
font-family: Calibri, Sans-Serif;
}
#Navigation li {
float: left;
list-style: none;
padding-right: 3%;
padding-top: 6px;
font-size: 100%;
}
#Navigation a:link, a:active, a:visited {
color: #012235;
text-decoration: none;
font-weight: 500;
}
#Navigation a:hover {
color: White;
}
#WebLinks {
float: right;
color: #00324b;
margin-top: 50px;
width: 375px;
}
#WebLinks span {
float: left;
margin-right: 7px;
margin-left: 21px;
font-size: 10pt;
margin-top: 8px;
font-family: Helvetica;
}
#WebLinks ul li {
float: left;
padding-right: 7px;
list-style: none;
}
#WebLinks ul li a {
text-decoration: none;
font-size: 8pt;
color: #00324b;
font-weight: normal;
}
#WebLinks ul li a img {
border-style: none;
}
#WebLinks ul li a:hover {
color: #bcc5c4;
}
사이드 바가 내 페이지의 콘텐츠와 함께 높이가 늘어나고 사이드 바 하단 이미지는 항상 사이드 바 하단에두고 싶습니다.
업데이트 : 이 답변은 여전히 위아래로 투표를 받고 있으며 8 년 된 시점에 있습니다. 아마도 더 나은 기술이있을 것입니다. 원래 답변은 다음과 같습니다.
높이 속성이 계산되는 방식에 따라 height: 100%자동 높이가있는 항목 내부에 설정할 수 없습니다 .
이것은 나를 위해 일했습니다.
.container {
overflow: hidden;
....
}
#sidebar {
margin-bottom: -5000px; /* any large number will do */
padding-bottom: 5000px;
....
}
CSS의 플렉스 박스가 더 주류가 될 때까지 항상 사이드 바를 절대적으로 배치하고 상단과 하단에서 0 픽셀 떨어진 곳에 고정한 다음 메인 컨테이너에 여백을 설정하여 보완 할 수 있습니다.
JSFiddle
HTML
<section class="sidebar">I'm a sidebar.</section>
<section class="main">I'm the main section.</section>
CSS
section.sidebar {
width: 250px;
position: absolute;
top: 0;
bottom: 0;
background-color: green;
}
section.main { margin-left: 250px; }
참고 :이 방법은 간단한 방법 bottom이지만 "페이지 하단"이 아니라 "창 하단"을 의미합니다. 기본 콘텐츠가 아래로 스크롤되면 사이드 바가 갑자기 종료 될 수 있습니다.
100 % 사이드 바 높이를 얻기 위해 CSS 테이블 을 사용 합니다.
기본 아이디어는 컨테이너에 사이드 바와 메인 div를 감싸는 것입니다.
용기에 display:table
그리고 2 개의 하위 div (사이드 바 및 메인)에 display: table-cell
그렇게 ..
#container {
display: table;
}
#main {
display: table-cell;
vertical-align: top;
}
#sidebar {
display: table-cell;
vertical-align: top;
}
위의 기술을 사용하여 초기 마크 업을 수정 한이 라이브 데모를 살펴보십시오 (다른 div에 배경색을 사용하여 어느 것이 무엇인지 확인할 수 있습니다).
Flexbox ( http://caniuse.com/#feat=flexbox )
먼저 div 또는 섹션에서 원하는 열을 래핑합니다. 예 :
<div class="content">
<div class="main"></div>
<div class="sidebar"></div>
</div>
그런 다음 다음 CSS를 추가합니다.
.content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@montrealmike의 답변에 추가로 내 적응을 추가 할 수 있습니까?
난 이걸했다:
.container {
overflow: hidden;
....
}
#sidebar {
margin-bottom: -101%;
padding-bottom: 101%;
....
}
나는 누군가가 5000px 이상의 높이를 가진 거대한 화면에서 사이트를 볼 수있는 (매우 드문) 가능성을 충족시키기 위해 "101 %"일을했습니다!
그래도 좋은 대답, 몬트리올 마이크. 그것은 나를 위해 완벽하게 작동했습니다.
여러 프로젝트에서이 문제를 여러 번 겪었지만 저에게 맞는 해결책을 찾았습니다. 사이드 바, 기본 콘텐츠 및 바닥 글을 포함하는 4 개의 div 태그를 사용해야합니다.
먼저 스타일 시트의 요소에 스타일을 지정합니다.
#container {
width: 100%;
background: #FFFAF0;
}
.content {
width: 950px;
float: right;
padding: 10px;
height: 100%;
background: #FFFAF0;
}
.sidebar {
width: 220px;
float: left;
height: 100%;
padding: 5px;
background: #FFFAF0;
}
#footer {
clear:both;
background:#FFFAF0;
}
원하는대로 다른 요소를 편집 할 수 있습니다. 바닥 글 속성 "clear : both"를 변경하지 않도록하십시오. 이것은 남겨 두는 것이 매우 중요합니다.
그런 다음 다음과 같이 웹 페이지를 설정하십시오.
<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>
http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container 에서 이에 대한 자세한 블로그 게시물을 작성했습니다 . 궁금한 점이 있으면 알려주세요. 도움이 되었기를 바랍니다!
아마도 다중 열 레이아웃 이 당신이 찾고있는 것입니까?
오늘은 아마도 이것을 위해 flexbox를 사용할 것입니다. 성배 예를 참조하십시오 .
나는 Jon과 같은 문제에 직면했습니다. TheLibzter는 나를 올바른 길로 안내했지만 사이드 바 하단에 있어야하는 이미지는 포함되지 않았습니다. 그래서 약간의 조정을했습니다 ...
중대한:
- 사이드 바 및 콘텐츠 (#bodyLayout)를 포함하는 div의 위치 지정. 이것은 상대적이어야합니다.
- sidbar (#sidebarBottomDiv)의 맨 아래에 있어야하는 div의 위치. 이것은 절대적이어야합니다.
- 콘텐츠 너비 + 사이드 바 너비는 페이지 너비와 같아야합니다 (#container).
CSS는 다음과 같습니다.
#container
{
margin: auto;
width: 940px;
}
#bodyLayout
{
position: relative;
width: 100%;
padding: 0;
}
#header
{
height: 95px;
background-color: blue;
color: white;
}
#sidebar
{
background-color: yellow;
}
#sidebarTopDiv
{
float: left;
width: 245px;
color: black;
}
#sidebarBottomDiv
{
position: absolute;
float: left;
bottom: 0;
width: 245px;
height: 100px;
background-color: green;
color: white;
}
#content
{
float: right;
min-height: 250px;
width: 695px;
background-color: White;
}
#footer
{
width: 940px;
height: 75px;
background-color: red;
color: white;
}
.clear
{
clear: both;
}
다음은 html입니다.
<div id="container">
<div id="header">
This is your header!
</div>
<div id="bodyLayout">
<div id="sidebar">
<div id="sidebarTopDiv">
This is your sidebar!
</div>
<div id="content">
This is your content!<br />
The minimum height of the content is set to 250px so the div at the bottom of
the sidebar will not overlap the top part of the sidebar.
</div>
<div id="sidebarBottomDiv">
This is the div that will stay at the bottom of your footer!
</div>
<div class="clear" />
</div>
</div>
</div>
<div id="footer">
This is your footer!
</div>
나는 이것이 오래된 게시물이라는 것을 알고 있지만 내 사이트에 사이드 바를 갖기 위해 무언가를 시도하고있었습니다. 작동할까요?
#sidebar-background
{
position:fixed;
width:250px;
top:0;
bottom:0;
background-color:orange;
}
#content-background
{
position:fixed;
right:0;
top:0;
bottom:0;
left:250px;
background-color:pink;
}
#sidebar
{
float:left;
width:250px;
}
#content
{
float:left;
width:600px;
}
<div id="sidebar-background"></div>
<div id="content-background"></div>
<div id="sidebar">Sidebar stuff here</div>
<div id="content">Stuff in here</div>
I think your solution would be to wrap your content container and your sidebar in a parent containing div. Float your sidebar to the left and give it the background image. Create a wide margin at least the width of your sidebar for your content container. Add clearing a float hack to make it all work.
use body background if you are using fixed width sidebar give the same width image as your side bar. also put background-repeat:repeat-y in your css codes.
Position absolute, top:0 and bottom:0 for the sidebar and position relative for the wrapper (or container) witch content all the elements and it's done !
참고URL : https://stackoverflow.com/questions/791231/css-sidebar-height-100
'Program Tip' 카테고리의 다른 글
| 목록에 대한 ViewModel 유효성 검사 (0) | 2020.10.28 |
|---|---|
| 없음 값으로 Pyspark 데이터 프레임 열 필터링 (0) | 2020.10.28 |
| iTunes Connect API (0) | 2020.10.28 |
| 파이프의 다른 쪽 끝에 프로세스가 없습니다 (SQL Server 2012) .No process is on the other end of the pipe (SQL Server 2012) (0) | 2020.10.28 |
| React- 라우터와 nginx (0) | 2020.10.28 |