주요 사업부 (또는 기관)

http://designobvio.us/vodka/ 라이브 내 HTML, 컨테이너를 설정 한주요 사업부 (또는 기관)

데모, 주 및 100 %지만 nomatter 내가 내가 무엇을 할 국경을 얻을 수에 100 % 높이/폭 국경을 얻기 스크롤 막대가없는 100 % 높이?

어떻게 효과를 얻을 수 있습니까?

HTML

<div id="main"> 

    </div>

CSS (안 현재 라이브 코드 그러나 이것은 내가 무엇을 시도했다입니다) 그래서

html, body{height:100%; width:100%;} 
#main{height:100%; position:absolute; top:0px; bottom:0px; left:0px; right:0px; border:5px solid #000;}

출처

2012-06-27 Matthew Harwood

당신이 고정 된 경계 또는 동적 국경을 찾고 계십니까? 코드의 문제점은 W3C 박스 모델입니다. 기본 모델에서는 패딩, 여백 및 테두리가 요소 크기에 추가됩니다. 그래서 당신의 코드에서 정말로 말하고있는 것은 "상자를 100 % 만든 다음 10px 분량의 테두리를 추가하십시오"입니다.

일반적으로 상자 모델을 수동으로 전환하는 것이 쉬운 변경 사항이지만, 불행히도 해당 속성은 height: 100%과 잘 맞지 않습니다. 따라서 몇 가지 옵션이 있습니다 :

1) 고정 테두리를 찾고있는 경우, 이것은 좋은 속임수입니다 : http://css-tricks.com/body-border/ 2) 동적 테두리가 필요한 경우, 테두리를 추가 높이로 처리해야합니다 추가.

<div id="container"> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div>

jsfiddle 여기

html,body { height:100%; padding: 0; margin: 0; } 
#container { 
    min-height:100%; 
    border-right: 5px solid #000; 
    border-left: 5px solid #000; 
    position: relative; /* relative postion so we can absolutely position footer within it */ 
} 
#header { 
    height: 100px; 
    border-top: 5px solid #000; 
    background-color: red; 
} 
#content { padding: 0 0 100px 0; } /*padding must be equal to the height of the footer*/ 
#footer { 
    height: 100px; 
    border-bottom: 5px solid #000; 
    background-color: blue; 
    position: absolute; 
    bottom: 0; 
    width: 100%; /* with absolute position, a width must be declared */ 
}

HTML : 기본적으로 http://jsfiddle.net/Qw2cb/

출처

2012-06-27 06:58:20

, 당신은 스크롤바를 표시하지 않는 말?

CSS :

#main 
{ 
    overflow: hidden; 
    height: 100%; 
    position: absolute; 
    margin: 0px; 
}

출처

2012-06-27 03:08:55

국경, 마진과 패딩 너비/높이의 일부가 아닌 및 상단에 추가됩니다 여기에 한 가지 방법입니다. 그래서 상자의 전체 크기가 너비와 높이의 너비와 테두리 너비에 100 %이기 때문에 스크롤 막대를 가져옵니다.

#main { 
    box-sizing: border-box; 
    [...]  
}

당신은 (디폴트 값은 content-box 반대의) 너비/높이 속성에서 테두리와 패딩에 대한 계산을 포함하도록 브라우저에 지시 border-box에 box-sizing 속성을 설정할 수 있습니다

가로서, 특히 IE8이 CSS-속성을 지원하지 않는 다른 브라우저 가족의 이전 버전, 너무, 일부 브라우저 별 정의를 추가하는 것이 좋습니다 :

#main { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -ms-box-sizing:  border-box; 
    box-sizing:  border-box; 
}

따 mozilla doku for detailed information on box-sizing을보십시오.

출처

2012-06-27 07:10:09 acme

나는이 게시물이 오래된 것을 알고 있지만, Google 첫 페이지에서 팝업으로 ...

height: 0: 
border-style: solid; 
border-width: 8vw 0 0 100vw; 
border-color: transparent transparent transparent red;

은 그냥 그것을 사용 : 여기에 고급 크로스 브라우저를 작동하는 것 같다 내 솔루션 의사 요소 후 삼각형 모양을 설정하기 위해이 있으며 (IE10까지 시험을) 잘 작동합니다.

100% 대신 100vw을 사용하기 만하면됩니다.

출처

2017-09-26 14:48:04 daneczech

그래, 2012 년에는 존재하지 않았어. 좋은 대답 tho –

사실 나는 알고있다. 어쩌면 다른 사람에게 도움이 될 것 같은 생각! – daneczech

당신은

#main{ 
    box-size:border-box; 
}

그렇게 경계 메인의 100 % 높이에 추가됩니다 이렇게 같은 box-size:border-box;에 '주'제공 할 수 있습니다. Learn more about box sizing here

출처

2017-09-26 14:59:19

주요 사업부 (또는 기관)

답변

관련 문제