[html] 트위터 부트 스트랩 3 두 열 전체 높이
Twitter 부트 스트랩 3 을 사용하여 2 열 전체 높이 레이아웃 을 만들려고 합니다. Twitter 부트 스트랩 3 은 전체 높이 레이아웃을 지원하지 않는 것 같습니다 . 내가하고 싶은 것 :
+-------------------------------------------------+
| Header |
+------------+------------------------------------+
| | |
| | |
|Navigation | Content |
| | |
| | |
| | |
| | |
| | |
| | |
+------------+------------------------------------+
콘텐츠가 커지면 탐색 기능도 커져야합니다.
- 콘텐츠가 한 줄인 경우가 있으므로 모든 부모의 높이 100 %가 작동하지 않습니다.
- 절대 위치가 잘못된 것 같습니다
display: table
그리고display:table-cell
문제를 해결하지만 우아하지 않다
html :
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9"></div>
</div>
</div>
기본 트위터 부트 스트랩 3 클래스 로 만들 수 있습니까?
답변
편집 :
에서 부트 스트랩 4 , 기본 클래스는 수 전체 높이 열 (생산 데모 가 변경 되었기 때문에) 자신의 그리드 시스템 인 flexbox에. (부트 스트랩 3에 대해 읽기)
기본 Bootstrap 3.0 클래스는 설명하는 레이아웃을 지원하지 않지만 CSS 테이블 을 사용하는 일부 사용자 정의 CSS를 통합 하여이를 수행 할 수 있습니다.
마크 업 :
<header>Header</header>
<div class="container">
<div class="row">
<div class="col-md-3 no-float">Navigation</div>
<div class="col-md-9 no-float">Content</div>
</div>
</div>
(관련) CSS
html,body,.container {
height:100%;
}
.container {
display:table;
width: 100%;
margin-top: -50px;
padding: 50px 0 0 0; /*set left/right padding according to needs*/
box-sizing: border-box;
}
.row {
height: 100%;
display: table-row;
}
.row .no-float {
display: table-cell;
float: none;
}
위의 코드는 전체 높이 열 (우리가 추가 한 사용자 정의 CSS 테이블 속성으로 인해)과 중간 화면 너비 및 그 이상에서 1 : 3 (탐색 : 내용) 비율 -(부트 스트랩의 기본 클래스로 인해 : col-md -3 및 col-md-9)
NB :
1) 부트 스트랩의 기본 열 클래스를 엉망으로 만들지 않기 위해 no-float
마크 업과 같은 다른 클래스를 추가 하고이 클래스 display:table-cell
와 float:none
클래스 에만 설정 합니다 (열 클래스 자체에 적용됨).
2) 특정 중단 점 (예 : 중간 화면 너비 이상)에 CSS 테이블 코드 만 사용하고 싶지만 모바일 화면의 경우 사용자 정의 CSS를 래핑 할 수있는 것보다 일반적인 부트 스트랩 동작으로 다시 설정하려고합니다. 미디어 쿼리
@media (min-width: 992px) {
.row .no-float {
display: table-cell;
float: none;
}
}
코드 펜 데모
이제 더 작은 화면의 경우 열은 기본 부트 스트랩 열처럼 작동합니다 (각각은 전체 너비를 얻음).
3) 모든 화면 너비에 1 : 3 비율이 필요한 경우 마크 업에서 부트 스트랩의 col-md- * 클래스를 제거하는 것이 좋습니다. 왜냐하면 이것이 사용되는 방식이 아니기 때문입니다.
코드 펜 데모
답변
당신은 당신이 padding-bottom: 100%; margin-bottom: -100%;
트릭으로 원하는 것을 얻을 수 있습니다 , 당신은 이 바이올린 에서 볼 수 있습니다 .
HTML을 약간 변경했지만 다음 코드를 사용하여 자신의 HTML로 동일한 결과를 얻을 수 있습니다.
.col-md-9 {
overflow: hidden;
}
.col-md-3 {
padding-bottom: 100%;
margin-bottom: -100%;
}
답변
순수한 CSS 솔루션
CSS2.1 만 사용하여 높이나 너비를 지정하지 않고 모든 브라우저 (IE8 +)로 작업하십시오 .
즉, 헤더가 갑자기 길어 지거나 왼쪽 탐색 기능을 확장해야하는 경우 CSS에서 아무것도 고칠 필요가 없습니다 .
반응이 빠르고 간단하며 명확하며 관리가 매우 쉽습니다.
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="LeftNavigation">
</div>
<div class="Content">
</div>
</div>
</div>
</div>
설명 :
컨테이너의 div
높이는 100 %이며 두 부분으로 나뉩니다. 헤더 섹션은 필요한 높이에 걸쳐 HeightTaker
있으며 나머지는 나머지 부분을 차지합니다. 어떻게 달성됩니까? 빈 요소를 컨테이너 옆에 100 % 높이로 플로팅하고 (을 사용하여 :before
), HeightTaker
명확한 규칙을 사용하여 끝에 빈 요소를 제공합니다 (을 사용 :after
). 해당 요소는 부동 요소와 같은 줄에있을 수 없으므로 끝까지 밀립니다. 정확히 문서의 100 %입니다.
이를 통해 HeightTaker
특정 높이 / 여백을 지정하지 않고 나머지 컨테이너 높이를 스팬으로 만듭니다 .
그 안에는 HeightTaker
약간의 변화만으로 일반 부동 레이아웃 (디스플레이와 같은 열을 달성하기 위해)을 만듭니다. 우리는 높이가 작동 Wrapper
하는 데 필요한 요소 100%
가 있습니다.
최신 정보
답변
기본 부트 스트랩 동작을 변경하지 않는 미묘한 변경에 대해 생각했습니다. 그리고 필요할 때만 사용할 수 있습니다.
.table-container {
display: table;
}
.table-container .table-row {
height: 100%;
display: table-row;
}
.table-container .table-row .table-col {
display: table-cell;
float: none;
vertical-align: top;
}
그래서 나는 이것을 다음과 같이 사용할 수 있습니다 :
<div class="container table-container">
<div class="row table-row">
<div class="col-lg-4 table-col"> ... </div>
<div class="col-lg-4 table-col"> ... </div>
<div class="col-lg-4 table-col"> ... </div>
</div>
</div>
답변
내 지식으로는 이것을 달성하기 위해 최대 5 가지 방법을 사용할 수 있습니다.
- CSS 표시 테이블 / 테이블 셀 속성 사용 또는 실제 테이블 사용
- 래퍼 내부에 절대 위치 요소를 사용합니다.
- Flexbox 표시 속성을 사용하지만 현재는 여전히 부분적으로 지원합니다
- 가짜 열 기술 을 사용하여 전체 열 높이를 시뮬레이션하십시오 .
- 패딩 / 여백 기술 사용 예를 참조하십시오 .
부트 스트랩 : 나는 그것에 대해 많은 경험이 없지만 스타일을 제공한다고 생각하지 않습니다.
.row
{
overflow: hidden;
height: 100%;
}
.row .col-md-3,
.row .col-md-9
{
padding: 30px 3.15% 99999px;
float: left;
margin-bottom: -99999px;
}
.row .col-md-3 p,
.row .col-md-9 p
{
margin-bottom: 30px;
}
.col-md-3
{
background: pink;
left:0;
width:25%
}
.col-md-9
{
width: 75%;
background: yellow;
}
답변
현대적이고 매우 간단한 솔루션 :
HTML :
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9"></div>
</div>
</div>
CSS :
.row{
display: flex;
}
답변
순수한 CSS 솔루션은 충분히 쉽고 매력적인 크로스 브라우저처럼 작동합니다.
탐색 및 내용 열에 큰 패딩과 동등한 음의 여백을 추가 한 다음 오버플로가 숨겨진 클래스에서 행을 줄 바꿈하면됩니다.
라이브 뷰
편집 뷰
HTML
<div class="container">
<div class="row">
<div class="col-xs-12 header"><h1>Header</h1></div>
</div>
<div class="row col-wrap">
<div class="col-md-3 col">
<h1>Nav</h1>
</div>
<div class="col-md-9 col">
<h1>Content</h1>
</div>
</div>
</div>
CSS
.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.col-wrap{
overflow: hidden;
}
행운을 빕니다!