컨테이너 크기 (HTML)?

편집 : .firstlayer의 위치를 절대로 변경하여이 문제를 해결했습니다. 이렇게하면 left/right 여백을 auto로 설정하면 컨테이너를 중앙에 맞출 수 없으므로 left : 0; 오른쪽 : 0; 폭을 정의하고 중요한 것으로 표시하면 컨테이너를 가운데에 배치합니다. 도와 주셔서 감사합니다!컨테이너 크기 (HTML)?

명확히하기 위해 페이지의 맨 아래로 확장하려고합니다. 지금까지의 모든 시도는 성공하지 못했습니다. 또한 모든 높이 특성은 브라우저 호환성을 위해 .firstlayer에 있습니다.

주석이 달린 스크린 샷은 here :(지금 레이아웃을 작성 중이므로 어리석은 것으로 보입니다). Top looks fine Bottom doesn't

나는 꽤 바보 같은 질문이 있습니다. 웹 페이지에서 작업하고 있는데 <span> 영역을 페이지 맨 아래까지 확장하려고합니다. 저는 온라인으로 답변을 검색했고 Iset의 본문 및 html 높이를 100 %로, 컨테이너 높이를 auto/min-height로 100 %로 설정했습니다. 그러나 여전히 페이지 나누기에만 도달했습니다.

누구든지이 문제를 해결하는 방법에 대한 제안 사항이 있습니까?

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ 
    border:0 none; 
    font:inherit; 
    margin:0; 
    padding:0; 
    } 

html, body { width:100%; height:100%; } 

body { background: #ff8 url("blue.jpg") repeat fixed; font-family: Helvetica, San-Serif; } 



    /*----- GRID -----*/ 
.container { 
    background: none; 
    overflow: none; 
    display: block; 
    z-index: 1; 
    } 

.firstlayer { 
    background-color: #fff !important; 
    height: auto !important; 
    min-height: 100%; 
    height: 100%; 
    width: 960px; 
    margin:0 auto; 
    border-left: solid 1px #000; border-right: solid 1px #000; 
    } 

.padded {margin-left:20px; margin-right:20px;} 

span { height:auto; } 
    .onecol { width:8.33%; float:left; } 
    .twocols { width:16.66%; float:left; } 
    .threecols { width:25%; float:left; } 
    .fourcols { width:33.33%; float:left; } 
    .fivecols { width:41.66%; float:left; } 
    .sixcols { width:50%; float:left; } 
    .sevencols { width:58.33%; float:left; } 
    .eightcols { width:66.66%; float:left; } 
    .ninecols { width:75%; float:left; } 
    .tencols { width:83.33%; float:left; } 
    .elevencols { width:91.66%; float:left; } 
    .allcols { width:100%; float:left; } 

footer { 
    font-size: 0.75em; 
    color: #fff; 
    background: 100px #000; 
    padding:10px 20px 10px 20px; 
    bottom: 0px; 
    height:7em; 
    }

그리고 내 HTML 코드는 여기에 있습니다 : :

내 CSS는 여기 여기

<!--Begin the content area--> 

    <span class="container firstlayer"> 
     <span class="container padded"> 

<!--TITLE AND SUBTITLE--> 
      <span class="container allcols"> 
       <h1>Stand-in Title</h1> 
       <h1 class="subtitle">Stand-in Subtitle</h1> 
      </span> 

<!--MEDIA PLACEHOLDER--> 
      <span style="height:400px; background-color:#000;" class="container allcols"> 
      </span> 

<!--ROW ZERO: 2 COLS--> 
      <span class="allcols" style="padding-top:1em;"> 
       <span class="container sixcols"> 
        <h2>Subtitle</h2> 
        <p> Lorem ipsum </p> 
       </span> 
       <span class="container sixcols"> 
        <h2>Subtitle</h2> 
        <p> Lorem ipsum </p> 
       </span> 
      </span> 

     </span> 
    </span>

출처

2012-06-14 Lee

'span {height : auto; }'line – Hope4You

정확하게 미디어 컨테이너가 창 크기에 따라 높이를 확장하려고하는 것을 올바르게 이해한다면? – Keith

당신은'span' 대신에'div' 's를 사용해야합니다. 'div'는 "block"수준의 요소이기 때문에 적절한 래퍼 컨테이너입니다.'span'은 "인라인"요소이기 때문에 적절한 래퍼 컨테이너가 아닙니다. [the W3 spec] (http://www.w3.org/TR/html401/struct/global.html#h-7.5.4)를 참조하십시오. – Sparky

나중에 이동합니다. <span> 태그를 사용하지 말고 <div> 태그로 변경하십시오. 그들은 더 강력하고 아무런 이유없이 때때로 작동하지 않습니다 ... 또한 높이 변수가 너무 많이 설정되었습니다. 기본적으로 가지고있을 때 : height : auto! important; 최소 높이 : 100 %; 신장 : 100 %; 그들은 모두 서로 모순되었습니다. 보통 조금 더 생각해 보면 더 간단합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<style type="text/css"> 
html, body, div, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ 
    border:0 none; 
    font:inherit; 
    margin:0; 
    padding:0; 
    } 

html, body { width:100%; height:100%; } 

body { background: #ff8 url("blue.jpg") repeat fixed; font-family: Helvetica, San-Serif; } 

    ... 

    /*----- GRID -----*/ 
.container { 
    background: none; 
    overflow: none; 
    display: block; 
    z-index: 1; 
    } 

.firstlayer { 
    background-color: #fff !important; 
    min-height: 100%; 
    max-height:100%; 
    width: 960px; 
    margin:0 auto; 
    border-left: solid 1px #000; border-right: solid 1px #000; 
    } 

.padded {margin-left:20px; margin-right:20px;} 

div { height:auto; } 
    .onecol { width:8.33%; float:left; } 
    .twocols { width:16.66%; float:left; } 
    .threecols { width:25%; float:left; } 
    .fourcols { width:33.33%; float:left; } 
    .fivecols { width:41.66%; float:left; } 
    .sixcols { width:50%; float:left; } 
    .sevencols { width:58.33%; float:left; } 
    .eightcols { width:66.66%; float:left; } 
    .ninecols { width:75%; float:left; } 
    .tencols { width:83.33%; float:left; } 
    .elevencols { width:91.66%; float:left; } 
    .allcols { width:100%; float:left; } 

footer { 
    font-size: 0.75em; 
    color: #fff; 
    background: 100px #000; 
    padding:10px 20px 10px 20px; 
    bottom: 0px; 
    height:7em; 
    } 
</style> 

</head> 

<body> 


<div class="container firstlayer"> 
     <div class="container padded"> 

<!--TITLE AND SUBTITLE--> 
      <div class="container allcols"> 
       <h1>Stand-in Title</h1> 
       <h1 class="subtitle">Stand-in Subtitle</h1> 
      </div> 

<!--MEDIA PLACEHOLDER--> 
      <div style="height:400px; background-color:#000;" class="container allcols"> 
      </div> 

<!--ROW ZERO: 2 COLS--> 
      <div class="allcols" style="padding-top:1em;"> 
       <div class="container sixcols"> 
        <h2>Subtitle</h2> 
        <p> Lorem ipsum </p> 
       </div> 
       <div class="container sixcols"> 
        <h2>Subtitle</h2> 
        <p> Lorem ipsum </p> 
       </div> 
      </div> 
     ... 
     </div> 
    </div> 
</body> 
</html>

희망이 있습니다.

출처

2012-06-14 23:46:04 Epik

시도해 주셔서 감사합니다. 그러나 이것은 나에게도 효과가 없습니다. 나는 "태그를 사용하려고 시도했지만 태그로 바꾸십시오"라는 문장을 이해하지 못했기 때문에 그렇게하지 않았습니다 -이를 명확히 할 수 있습니까? 내가 다른 브라우저를 설명하기 위해 높이 그런 식으로 설정 - 이전 버전의 브라우저 (* 기침 IE6 *)가 중요 무시하고 최소 높이 이해하지 못하는 동안 첫 번째 걸릴 것 최신 브라우저는 중요한 표시. 그렇게하면 이론적으로는 적어도, 과거에는 저에게 효과적이었습니다. 거의 모든 것과 호환됩니다. – Lee

@Lee 고정 된 문장에 이스케이프 처리되지 않은 태그가 나타납니다. –

-1

요즘 대부분의 사람/회사가 IE6에 대해 너무 많이 걱정하지는 않을 것입니다. 내가 일하는 회사는 이미 너무 오래 되었기 때문에 이미 가지고 있습니다 (Windows XP, 2001 이전).

span 태그 대신 div 태그를 사용하십시오. 나중에 HTML5에 추가하려는 경우 span 태그가 더 다양하므로 span 태그를 사용하십시오.

기본적으로 자동 높이와 100 % 높이를 제거하여 최대 높이와 최소 높이를 설정하는 것은 저에게 효과적입니다.

당신이 어떻게 가는지 알고 싶다면 내가 비교하고 테스트 할 수 있도록 내가 얻은 것의 스크린 샷을 게시 해주십시오.

출처

2012-06-15 00:44:37 Epik

나는 그것을 시도했지만 효과가없는 것 같습니다. 나는 또한 모든 추가 높이 제약 조건을 없앴다. 그러나 그것은 아무 것도하지 않았다. 나는 분에 스크린 샷을 올려하려고합니다. – Lee

좋아요, 스크린 샷이 올라와 있습니다. 약한 대답과 문자 약어 사용에 대해서는 – Lee

-1입니다. – Sparky

두 개의 스팬 클래스가 float:left으로 설정되어있는 것으로 나타났습니다. 나는 당신이 에픽의 충고를 대신 div로 바꾸도록했다고 가정하고 있습니다.

제공 한 코드 샘플이 부분적이므로 HTML에 클리어 픽스를 포함했는지 확실하지 않은데, 스크린 샷이 주 컨테이너 나 래퍼가 떠 다니는 하위 요소의 존재와 관련이 없음을 나타냅니다. 그 (것)들을 포함하면, 그것은 명확한 수정이 없을 가능성이 있습니다. 플로팅 된 요소 뒤에 clearfix를 추가하여 문제가되는 div를 화면에 채우는 방법을 시도하기 전에 먼저이 문제를 해결할 수 있습니다. 이런 식으로 뭔가 :

HTML

<div id="container"> 
    <div id="col1" class="col">1</div> 
    <div id="col2" class="col">2</div> 
    <div id="col3" class="col">3</div> 
<div class="clearfix"></div> 
</div>

CSS

body{ 
    background:#333333; 
} 

#container{ 
    width:100%; 
    height:100%; 
    position:absolute; 
    background:#ffffff; 
    top:0; 
    left:0; 
} 

.col{ 
    float:left; 
    width:30%; 
    margin-right:30px; 
    background:#cccccc; 
    color:#333333; 
} 

.clearfix:before, .clearfix:after { 
    content: ""; 
    display: table; 
} 

.clearfix:after { 
    clear: both; 
} 

.clearfix { 
    zoom: 1; 
}

당신은 내가 #container에 position:absolute를 추가 한 위에서 알 수 있습니다. 이렇게하지 않으면 height:100% 정의가 작동하지 않기 때문입니다. 컨테이너가 항상 창 전체 높이를 채울 것이기 때문에이 경우 clearfix가 필요하지 않을 수 있습니다. 그러나 컨테이너에 더 많은 열을 계속 추가한다는 의미에서 내용이 동적 인 경우 컨테이너는 새로 떠 다니는 열을 등록하지 못하고 다시 사각형으로 끝날 것입니다.

그래서 기본적으로, 여기에서 진행되고 있어요 것은 당신 컨테이너가 떴다 자식 요소의 존재를 인식하고 확보하기 위해 height:100% 또는 뭔가 덜 height:90% 등을 사용하기 전에 먼저 절대 컨테이너의 위치를 확인하기 위해 clearfix을 추가하는 첫번째 필요 검은 색 바닥 글에 필수 공간.

나는 당신의 참조를 위해 jsFiddle에서 샘플 코드를 넣어 한 - http://jsfiddle.net/qmHzC/

당신은 내가 background:#333333에 body을 설정 한 것을 알 것입니다. 이는 코드를 테스트 할 수있는 컨트롤 역할을합니다. position:absolute을 #container에서 제거하면 컨테이너가 더 이상 전체 창을 차지하지 않아 몸의 어두운 배경을 표시합니다. 절대 위치 지정을 제거하는 것 외에도 float 하위 요소 뒤에 <div class="clearfix"></div>을 제거하면 흰색 컨테이너가 더 이상 떠 다니는 하위 요소를 인식하지 않고 아무 것도 보유하지 않은 것처럼 즉시 사라지는 것을 볼 수 있습니다.

희망이 도움이됩니다.

편집 :몇 가지 생각을 해본 후 분명히 clearfix가 없기 때문에 문제가 더 심각하다고 느낍니다. 컨테이너를 절대 위치로 배치하면 margin:0 auto을 사용하여 뷰포트 중앙의 컨테이너를 중앙 집중화 할 수 없습니다. 또한 컨테이너는 창의 아래쪽이 아니라 검은 색 바닥 글의 맨 아래로 오른쪽으로 흐르게됩니다. 따라서 흰색 컨테이너의 실제 높이는 내용물의 가치만큼 위쪽 또는 아래쪽 패딩을 더해 야합니다. 이를 달성하기 위해서는 clearfix 솔루션이 자체적으로 작동해야합니다. position:absolute 부분을 편집하지 않을 것입니다. div를 사용하여 jQuery를 사용하지 않고 창의 높이와 너비를 상속 받도록하려는 사람들에게 도움이 될 수 있습니다.

출처

2012-06-15 15:26:15 vynx

컨테이너 크기 (HTML)?

답변

관련 문제