크로스 브라우저 전체 너비 CSS

특정 웹 사이트를 다시 만들려는 어려움을 겪었지만 전폭 크로스 브라우저 템플릿을 만드는 것이 가장 좋습니다. HTML 5를 사용하고 있으며 지금까지 가지고 있습니다.크로스 브라우저 전체 너비 CSS

너비는 100 %로 사용합니까?

HTML은

<div id="wrapper"> 
    <header> 
     <h1>Logo Position</h1> 
     </header>

CSS :

#wrapper{ 
    width:990px; 
    height:100%; 
    min-height:100%; 
    background:#000; 
} 
header{ 
    width:100%; 
    height:100px; 
    color:#184C82; 
}

출처

2012-05-28 Jess McKenzie

작동하지 않습니까? – Blender

-1

또한

#wrapper { 
width:100%; /* or width:990px; */ 
height:100%; 
position:absolute; 
}

출처

2012-05-28 04:30:38

포지션을주는 이유 : 절대? – sandeep

힘을 완전히 조절 높이 –

절대 위치에서 전체 레이아웃을 만드는 것은 잘못된 방법입니다. – sandeep

이 100%에 <header> 폭 설정은 만 990px입니다 부모의 폭 만들 것입니다. 뷰포트 너비의 100 %까지 늘리려면 래퍼에서 꺼내거나 absolute 또는 fixed으로 배치하거나 :before 및/또는 :after을 사용하여 너비가 너비 인 느낌을 주어야합니다. 뷰포트.

크리스 코 이어 (Chris Coyier)는이 기사에서이 마지막 방법을 시연했습니다 Full Browser Width Bars.

출처

2012-05-28 04:25:18 Sampson

단순히 헤더에 width:100%을 사용 .. 그렇게 사용하고 래퍼를 제거해야합니다. <body>을 부모 요소로 사용하여 별도의 DIV로 레이아웃의 개별 부분을 빌드하십시오. 당신은 황금이 될거야!

출처

2012-05-28 06:10:59 Nathanael

일반적으로 너비를 무시할 수 있습니다 (즉, 아무 것도 설정하지 않거나 이전에 설정하지 않은 항목으로 설정 한 경우 auto으로 설정하면 전체 너비로 기본 설정됩니다). 가장자리 가장자리에 작은 여백이 있습니다. 당신이 바닥 글을 추진하려는 경우 일반적에만 필요합니다

body, html { 
    margin: 0; 
    padding: 0; 
}

높이 덤비는 : 당신이 마진 (크로스 브라우저) 사라 싶은 경우에, 당신은 모두 body 및 html에 0 마진과 패딩을 모두 설정해야합니다 페이지 내용이 부족할 때 화면 하단으로 내려갑니다. 너는 그걸 요구하지 않았으므로 나는 정교하지 않을 것이다. (그 주제에 대한 기존의 스택 오버 플로우 관련 질문이 있습니다.)

특정 요소 (특히 테이블)에는 width: 100% 선언이 필요하지만 divs와 본문은 필요하지 않습니다. 다양한 CSS 선언 중 하나를 사용하지 않는 한 shrinkwrapping (예 : display: inline-block, float: left 또는 position: absolute). width: 100%은 블록 요소 (본문 포함)의 기본 동작과 완전히 동일하지 않습니다. 블록 요소는 여백, 테두리 및 패딩을 고려하여 사용 가능한 공간을 많이 차지하지만 width: 100%의 요소는 그것의 부모 요소 - 그리고 여백, 경계 또는 패딩은 그 이상으로 튀어 나올 것입니다.

출처

2012-05-28 07:42:11 Brilliand

@Brian 당신이 자리하고 있습니다. 한 번 body 태그와 html 태그가 같이 설정되었습니다. body, html {margin : 0; 패딩 : 0; }' 그런 다음 머리글, 사이드 바 바닥 글 등에 %를 100 %, 30 % – Damilola

크로스 브라우저 전체 너비 CSS

답변

관련 문제