콘텐츠와 함께 확장하려면 CSS 사이드바 높이가 필요합니다.

StackOverflow https://stackoverflow.com/questions/1610710

  •  05-07-2019
  •  | 
  •  

문제

오른쪽에 회색 사이드바가 있는 2열 레이아웃이 있습니다.콘텐츠가 동적으로 확장되기 때문에 왼쪽 열의 높이가 증가할 때 확장하려면 사이드바의 높이가 필요합니다.사이드바를 정적 페이지에 맞게 만들 수는 있지만 페이지의 나머지 부분과 함께 크기를 늘릴 수는 없습니다.인터넷 검색을 좀 했지만 나에게 맞는 해결 방법을 찾을 수 없었습니다.

이 작업을 수행하는 방법을 아는 사람이 있나요?

도움이 되었습니까?

해결책

이 유형의 레이아웃에 DIV를 사용할 때 일반적인 문제입니다.

Google 'Faux Column'이라면 답변을 얻을 수 있습니다.

예를 들어. http://www.alistapart.com/articles/fauxcolumns/

다른 팁

이것은 약간 꺼질 수 있지만 사이트에서 jQuery를 사용하는 경우 빠른 계산을 수행하고 유사한 클래스를 최대 높이로 공유하는 모든 DIV 크기를 조정할 수 있습니다.

$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));

나는이 문제에 잠시 동안 귀신을 겪었고이 문제에 관한 기사를 썼습니다. 가짜 열로 완료되었습니다. 여기에 내가 주장한 내용은 다음과 같습니다.

이 문제에 대한 JavaScript 기반 솔루션은 다른 솔루션보다 나쁘지 않습니다. 실제로 JavaScript를 사용하는 경우 일을 작동시키기 위해 몇 시간 동안 좌절감을 줄 수 있습니다. 사람들은“사용자가 JavaScript를 끄면 어떻게 될까요?”라고 말함으로써 이것에 대해 경고 할 것입니다. 사용자가 JavaScript를 끄면 대부분의 웹이 그를 위해 고장났습니다. 당신의 사이드 바는 그에게 중요하지 않습니다.

Cballou가 언급했듯이,이 작업을 수행하는 가장 간단한 방법은 jQuery 코드를 사용하는 것입니다.

$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));

나는 background-color 하나의 전체 배경이 아닌 모든 섹션에 대한 배경이 있지만 특정 페이지에서 사이드바와 동일한 색상으로 표시됩니다.그러나 그것은 모든 사람에게 효과가 없을 수도 있습니다.

내 스타일시트에서는

.sidec
{
background-color:#123456;
}

내 HTML 페이지에서

<body class="sidec">

content....

</body>

최근에 CSS 속성을 사용 하여이 문제에 대한 매우 창의적인 솔루션을 보았습니다. position:absolute 그리고 border.

그것이 당신에게 효과가 있는지 확인하기 위해 확실히 확인할 가치가 있습니다.

링크: http://wookup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/

나는 초보자이기 때문에 이것이 도움이 될지 확실하지 않습니다. 그러나 사이드 바가 전체 내용을 두 배로 늘릴 때 전체 내용을 보여주기 위해 고군분투 할 때 다음을 수행했습니다. 수업을 바꿀 때까지 응답없이 키와 너비를 바꾸고있었습니다. 내 수업에는 SB 프레임 SB 너비가 나열되었습니다. 따라서 클래스를 변경하여 SB 높이 SB 너비를 읽을 때 원래 프레임 크기 대신 내 컨텐츠에 맞습니다. 또한 SB Max SB 너비도 작동했지만 바닥 글 메뉴 막대를 꺼내 었습니다 (의미가 더 이상 표시되지 않음). 나는 SB 높이 SB 너비로 돌아갔다. 그것은 여러분 모두를위한 슈퍼 듀퍼 초등학교입니다. 그러나 나 자신과 같은 HTML 코드에 대해 많이 이해하지 못하는 또 다른 초보자가있는 경우를 대비하여 ...이 도움이되기를 바랍니다 =) 모두 행복한 휴일! 포옹, 타라

나는 당신이 당신의 레이아웃에 특정 효과를 적용하여 두 열이 함께 크기를 조정해야한다는 것을 생각합니다. 열의 높이 값을 동적으로 변경하려면 스타일을 제어하기 위해 일부 JavaScript를 구현하지 않는 한 CSS에서 단순히 작동하지 않을 것입니다.

Dal이 제안한 것처럼 가짜 열의 링크를 살펴보십시오. 이름에서 알 수 있듯이 솔루션은 열 높이를 수정하는 것이 아닙니다. 대신, 그것은 실제로 두 열이 실제로는 그렇지 않을 때 높이가 같은 것으로 보이며 배경 이미지의 타일을 사용하는 "환상"을 제공합니다.

아이디어는 마크 업을 복잡하게 할 필요가 없다는 것입니다. 이미지와 "환상"을 터치하는 간단한 구조는 웹 디자인에서 일반적인 관행입니다.

안부, 요나

여기에 새로운 회원들에 대한 열악한 태도로 나는이 답변을 위해 막을 내릴 것으로 기대합니다. 나는 각각의 너비 (780px 및 180px)의 열에 필요한 두 가지 색상으로 배경 이미지 960px 너비의 1px 높이를 만들어이 문제를 해결했습니다. 그런 다음 y 축에서 반복 된 컨테이너의 배경 이미지로 이것을 사용하고 내용과 오른쪽 측면 막대 배경 색상 : Transparent를 만들었습니다.

 .container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto; 
background-image: url(../images/bgs/conbg.jpg);
background-repeat: repeat-y;
}

.sidebar1 {
float: right;
width: 180px;
height:auto;
background-color:transparent;
padding-bottom: 10px;
}

.content {
padding: 10px 0;
width: 780px;
background-color:transparent;
float: right;
}

이 방법에는 한계가 있다고 확신하지만 모든 페이지에서 완벽하게 작동합니다.

내가 이것을 잘 설명하지 않았을 가능성이 있다면, 그렇다면, 당신이 기쁘게 생각할 것입니다. 나는 내 방법을 확장하기 위해 기부 할 것입니다 (아마도 이미 공통 지식 일 것입니다).

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top