programing

부트스트랩 3 두 열 최대 높이

procenter 2023. 9. 7. 23:14
반응형

부트스트랩 3 두 열 최대 높이

트위터 부트스트랩 3으로 2열 풀하이트 레이아웃을 만들려고 합니다.Twitter Bootstrap 3는 풀 하이트 레이아웃을 지원하지 않는 것 같습니다.내가 하고 싶은 일:

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+

는 .nav또한 커져야 합니다.

  • 콘텐츠가 한 줄인 경우가 있기 때문에 모든 부모에 대해 높이 100%가 작동하지 않습니다.
  • position: absolute잘못된 방법인 것 같습니다.
  • 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로 변경했기 때문에 전체 높이 열(DEMO)을 생성할 수 있습니다. (부트스트랩 3의 경우 읽기)

The native Bootstrap 3.0 classes don't support the layout that you describe, however, we can integrate some custom CSS which make use of CSS 테이블 to achieve this.

부트플라이 데모 / 코드펜

마크업:

<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-table 속성으로 인해) 전체 높이 열과 비율 1:3(내비게이션:내용) 중간 화면 너비 이상 - (부트스트랩의 기본 클래스로 인해 col-md-3 및 col-md-9)

NB:

1)부트스트랩의 네이티브 컬럼 클래스를 망치지 않기 위해 다음과 같은 클래스를 추가합니다.no-float과한서서한t과nyed.display:table-cell그리고.float:none(컬럼 클래스 자체에 적용되는) 이 클래스에 대해.

2)특정 중단점(예: 중간 화면 너비 이상)에 대해서만 CSS-table 코드를 사용하고 모바일 화면의 경우 사용자 지정 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% 높이를 찍었고, 두 구역으로 나누어져 있습니다.되며,더은한지며,며지e은더한eod,HeightTaker나머지는 높이의겁니다 가져갈 요소를 띄우면 어떻게 됩니까 빈 따라 용기를 다 ? 됩니까 어떻게 100 띄우면 with using along container the an side 나머지는 by ? floating ( is achieved 겁니다 how it element 가져갈 다 empty 높이의 % 요소를 빈 따라 height 100 % ?:before), 및를함), 을 을 .HeightTaker규칙이 의 빈 는의빈소용(소용빈)한n ( )를 사용함):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>

현대적이고 매우 단순한 솔루션:

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;
}

이를 위해 최대 5가지 방법을 사용할 수 있는 것으로 알고 있습니다.

  1. CSS 디스플레이 테이블/테이블 셀 속성을 사용하거나 실제 테이블을 사용합니다.
  2. 포장지 안에 절대적인 위치의 요소를 사용합니다.
  3. Flexbox 디스플레이 속성을 사용하지만 현재까지도 부분적으로 지원됩니다.
  4. 가짜 기둥 기법을 사용하여 전체 기둥 높이를 모의실험합니다.
  5. 패딩/마진 기법을 사용합니다.예를 보시오.

부트스트랩:제가 경험은 별로 없지만 스타일은 잘 안 맞는 것 같아요.

.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;
}

순수 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; 
}

행운을 빕니다.

솔루션은 두 가지 방법으로 달성할 수 있습니다.

  1. 디스플레이 사용:테이블 및 디스플레이:테이블 셀
  2. 패딩과 마이너스 마진을 사용합니다.

위 솔루션을 얻기 위해 사용되는 클래스는 부트스트랩 3에서 제공되지 않습니다. display:table 및 display:table-cell이 제공되지만 HTML에서 테이블을 사용할 경우에만 제공됩니다. 음의 마진 및 패딩 클래스 또한 제공되지 않습니다.

따라서 우리는 이를 달성하기 위해 커스텀 css를 사용해야 합니다.

아래가 첫번째 해결책입니다.

HTML 코드:

<div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row tablewrapper">
    <div class="col-md-12 tablerowwrapper">
        <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content">
            <div class="col-md-12">
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div>
    </div>
  </div>

</div>

해당 CSS:

html,body,.container{
        height:100%;
    }
    .tablewrapper{
        display:table;
        height:100%;
    }
    .tablerowwrapper{
        display:table-row;
    }
    .sidebar,.content{
        display:table-cell;
        height:100%;
        border: 1px solid black;
        float:none;
    }
    .pad_top15{
        padding-top:15px;
    }

아래는 두번째 해결책입니다.

HTML 코드:

 <div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row ovfhidden bord_bot height100p">
    <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content pad_top15">
            <div class="col-md-12">

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div> 
  </div>

</div>

해당 CSS:

html,body,.container{
        height:100%;
    }
    .sidebar,.content{
        /*display:table-cell;
        height:100%;*/
        border: 1px solid black;
        padding-bottom:8000px;
        margin-bottom:-8000px;
    }
    .ovfhidden{
        overflow:hidden;
    }
    .pad_top15{
        padding-top:15px;
    }
    .bord_bot{
        border-bottom: 1px solid black;
    }

네, 부트스트랩 3.0을 통해서도 같은 결과를 얻었습니다.

최신 부트스트랩 예제

http://jsfiddle.net/HDNQS/1/

HTML:

<div class="header">
    whatever
</div>
<div class="container-fluid wrapper">
    <div class="row">
        <div class="col-md-3 navigation"></div>
        <div class="col-md-9 content"></div>
    </div>
</div>

SCSS:

html, body, .wrapper {
    padding: 0;
    margin: 0;
    height: 100%;
}

$headerHeight: 43px;

.navigation, .content {
    display: table-cell;
    float: none;
    vertical-align: top;
}

.wrapper {
    display: table;
    width: 100%;
    margin-top: -$headerHeight;
    padding-top: $headerHeight;
}

.header {
    height: $headerHeight;
}

.row {
    height: 100%;
    margin: 0;
    display: table-row;
    &:before, &:after {
        content: none;
    }
}

.navigation {
    background: #4a4d4e;
    padding-left: 0;
    padding-right: 0;
}

그래서 당신이 선택할 수 있는 최선의 방법은padding-bottom부정적인 태도로margin-bottom전략.

저는 두 가지 예시를 만들었습니다.한명과<header> 안에서. .container, 그리고 또 하나는 밖에 있습니다.

두 버전 모두 제대로 작동해야 합니다.다음의 사용에 유의합니다.@media쿼리를 사용하면 작은 화면에 추가 패딩을 제거할 수 있습니다.

@media screen and (max-width:991px) {
    .content { padding-top:0; }
}

그 외에는, 그 예들은 당신의 문제를 해결할 것입니다.

당신이 걱정하는 것은 색을 내리는 것뿐이라면 훨씬 더 쉬운 방법이 있습니다.

이것을 당신의 바디 태그에 먼저 넣거나 마지막에 넣으십시오.

<div id="nfc" class="col col-md-2"></div>

그리고 이것은 당신의 css에.

#nfc{
  background: red;
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  z-index: -99;
}

그냥 모양을 만들어서 페이지 뒤에 고정시키고 최대 높이로 늘이는 겁니다.기존의 부트스트랩 클래스를 활용하면 적절한 폭을 얻을 수 있고 반응성도 유지됩니다.

c의 이 방법에는 몇 가지 한계가 있지만, 페이지의 루트 구조를 위한 것이라면 가장 좋은 답입니다.

해라

<div class="container">
    <div class="row">
        <div class="col-md-12">header section</div>

    </div>
     <div class="row fill">
        <div class="col-md-4">Navigation</div>
        <div class="col-md-8">Content</div>

    </div>
</div>

.fill 클래스의 CSS는 아래와 같습니다.

 .fill{
    width:100%;
    height:100%;
    min-height:100%;
    padding:10px;
    color:#efefef;
    background: blue;
}
.col-md-12
{
    background: red;

}

.col-md-4
{
    background: yellow;
    height:100%;
    min-height:100%;

}
.col-md-8
{
    background: green;
    height:100%;
    min-height:100%;

}

참고로 바이올린만 들여다 보세요.

이거 먹어봐요.

 <div class="container">
     <!-- Header-->         
  </div>
</div>
 <div class="row-fluid">
     <div class="span3 well">
         <ul class="nav nav-list">
             <li class="nav-header">Our Services</li>
                <!-- Navigation  -->
             <li class="active"><a href="#">Overview</a></li>
             <li><a href="#">Android Applications</a></li>
             <li class="divider"></li>
         </ul>
     </div>
     <div class="span7 offset1">
      <!-- Content -->         
     </div>
 </div>

http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/ 를 방문하세요.

Syed 덕분에

부트스트랩과 호환되는 간단한 CSS를 작성하여 전체 너비 및 높이 테이블을 만들었습니다.

피들: https://jsfiddle.net/uasbfc5e/4/

원칙은 다음과 같습니다.

  • 메인 DIV에 "tablefull"을 추가합니다.
  • 그런 다음 암시적으로 아래의 DIV는 행을 생성합니다.
  • 행 아래의 DIV는 셀이 됩니다.
  • 헤더 등에 대해 "tableheader" 클래스를 사용할 수 있습니다.

HTML:

<div class="tablefull">
    <div class="tableheader">
        <div class="col-xs-4">Header A</div>
        <div class="col-xs-4">B</div>
        <div class="col-xs-4">C</div>
    </div>
    <div>
        <div class="col-xs-6">Content 50% width auto height</div>
        <div class="col-xs-6">Hello World</div>
    </div>
    <div>
        <div class="col-xs-9">Content 70% width auto height</div>
        <div class="col-xs-3">Merry Halloween</div>
    </div>
</div>

CSS:

div.tablefull {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

div.tablefull>div.tableheader, div.tablefull>div.tableheader>div{
    height: 0%;
}

div.tablefull>div {
    display: table-row;
}

div.tablefull>div>div {
    display: table-cell;
    height: 100%;
    padding: 0;
}

행 뒤에 콘텐츠가 없을 경우(전체 화면 높이를 찍음), 를 사용하는 방법position: fixed; height: 100%위해서.col:before요소가 잘 작동할 수 있습니다.

header {
  background: green;
  height: 50px;
}
.col-xs-3 {
  background: pink;
}
.col-xs-3:before {
  background: pink;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */
}
.col-xs-9 {
  background: yellow;
}
.col-xs-9:before {
  background: yellow;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<header>Header</header>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3">Navigation</div>
        <div class="col-xs-9">Content</div>
    </div>
</div>

이것은 여기서 상쇄와 함께 언급되지 않았습니다.

absolute to position(절대)를 사용하여 왼쪽 사이드바를 배치할 수 있습니다.

CSS

.sidebar-fixed{
  width: 16.66666667%;
  height: 100%;
}

HTML

<div class="row">
  <div class="sidebar-fixed">
    Side Bar
  </div>
  <div class="col-md-10 col-md-offset-2">
    CONTENT
  </div>
</div>

이거 먹어봐요.

<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">Nav     Content</div>
<div class="col-xs-12 col-sm-9">Content goes here</div>
</div>

이것은 부트스트랩 3을 사용하므로 추가적인 CSS등이 필요 없습니다...

JAvascript의 섹션에서 부트스트랩의 수정사항을 보았습니까?

내 생각엔 그게 최고의 가장 쉬운 해결책일 것 같아 친구.

http://getbootstrap.com/javascript/ #affix 를 보세요.

여기에 제공된 코드로 실험한 후: 부트스트랩 튜토리얼

다음은 최신 Bootstrap v3.0.2를 사용하는 다른 방법입니다.

마크업: 

<div id="headcontainer" class="container">
           <p>Your Header</p>    
</div>
<div id="maincontainer" class="container">
      <div class="row">
         <div class="col-xs-4"> 
            <p>Your Navigation</p> 
         </div>
         <div class="col-xs-8"> 
            <p>Your Content</p> 
         </div>
      </div>
</div>

추가 CSS:

#maincontainer, #headcontainer {
width: 100%;
}

#headcontainer {
background-color:#CCCC99; 
height: 150px
}

#maincontainer .row .col-xs-4{
background-color:gray; 
height:1000px
}

#maincontainer .row .col-xs-8{
background-color:green;
height: 1000px
}

샘플 JSFiddle

이것이 관심있는 사람들에게 도움이 되길 바랍니다.

언급URL : https://stackoverflow.com/questions/19089384/bootstrap-3-two-columns-full-height

반응형
저작자표시

'programing' 카테고리의 다른 글

데이터베이스에서 검색한 데이터를 인쇄하는 방법  (0) 2023.09.07
Facebook Connect 및 ASP.NET  (0) 2023.09.07
pyspark 문자열을 날짜 형식으로 변환  (0) 2023.09.07
각도 6 마이그레이션 -.angular-cli.json에서 angular.json으로  (0) 2023.09.07
npm 종속성의 경우 VS Build 도구를 설치한 후 PowerShell이 고착되고 설치 관리자 로그 파일에서 python을 설치하는 것을 아직 기다리고 있다고 표시됩니까?  (0) 2023.09.07

'programing'의 다른글

  • 현재글부트스트랩 3 두 열 최대 높이

관련글

댓글

티스토리툴바