부트 스트랩 푸터 (주 내용이지만 전체 너비는

-1

) 알았어 내가 완전히 잘못되었거나 제대로 시작하는 법을 알지 못한다.부트 스트랩 푸터 (주 내용이지만 전체 너비는

나는 내 웹 사이트의 레이아웃은 다음과 같이 할 것을 권장합니다

내가 헤더와 콘텐츠에 'myWrap'라는 사업부를 넣어. 그리고이 CSS를 추가했습니다 :

.myWrap { 
    position: absolute; 
    padding: 0px; 
    margin: 0px; 
    background: white; 
    top: 2%; 
    left: 2%; 
    right: 2%; 
} 

.footer { 
    position: absolute; 
    background: #363130; 
    margin-top: 2%; 
    height: 300px; 
    left: 0; 
    width: 100vw; 
}

그리고 바닥 글은 myWrap-div에 없습니다. 그러나 지금은 myWrap의 위치가 절대적이기 때문에 내용 뒤에 떠있는 것입니다. 정상적인 흐름에는 헤더와 내용을 넣지 만 배경의 앞쪽에는 어떻게 배치합니까? 나는 그것이 바로 위에 주위에 떠있는 나이기 시작 myWrap의 사업부에서 바닥 글을 넣으면

<div class="row container-fluid myWrap"> 
    CONTENT 
    <div class="container-fluid footer"> 
     FOOTER 
    </div> 
</div>

이 position: relative에 컨텐츠/헤더

출처

2016-12-20 Trojan

넣어'''바닥 : 0;''' 귀하의 클래스'''.footer'''에 그리고 당신의 꼬리말은 여전히''myWrap''' 클래스에 있습니다. – aavrug

변경 .myWrap 겹치는 :

는 그와 같은 HTML을 구조화 , footer는 상대적 위치 CSS 속성을 가진 부모 요소를 가지지 않으므로 본문의 절대 위치를 얻고 있습니다.

.myWrap { 
    position: relative; 
}

이렇게하면 바닥 글이 항상 myWrap의 맨 아래에 표시됩니다. http://www.bootply.com/8Wmx3CJHFv

출처

2016-12-20 11:04:15 Troyer

는이

<div class="myWrap"> 
<div class="container"> 
    <div class="row">

을 시도해보십시오

나는 그것이 작동하고 방법을 보여주기 위해 Bootply을 만든) 그런 다음 위/아래 속성으로 재생하고 당신이 원하는 위치에 배치 할 수 있습니다 컨테이너가 끝난 후 바닥 글을 추가하십시오.

출처

2016-12-20 11:09:33

개인적으로 개인 래퍼는 사용할 수 없습니다. 부트 스트랩은 이유가 있기 때문에 반응 형 뷰포트에서 완벽하게 작동합니다.

<html> 
    <body> 
     <header> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         // content here 
        </div> 
       </div> 
      </div>  
     </header> 
     <section id="content"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         // content here 
        </div> 
       </div> 
      </div>  
     </section> 
     <footer> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         // content here 
        </div> 
       </div> 
      </div>  
     </footer> 
    </body> 
</html>

CSS

body {background-color: #FFF;} 
footer {background-color: #FFF;} 
header {background-color: #FFF;} 
.container-fluid {padding: 0 0;}

그냥 당신이 .container- 위해 패딩을 제거해야합니다

HTML :

난 당신이 뭔가를 향상 좋을 것 유동체. 그리고 팁 : 자신 만의 래퍼를 만드는 느낌이 든다면 절대적으로 배치하지 말고 상대와 배치하십시오. 그렇지 않으면 모든 뷰포트에서 제대로 작동하지 않습니다.

출처

2016-12-20 11:09:58

하지만 콘텐츠와 배경 사이의 간격을 어떻게 달성 할 수 있습니까? – Trojan

fiiddle 여기에서 위의 html을 사용합니다 : https://jsfiddle.net/q4Lcjmsy/1/ –

max-width : 1150px를 사용했습니다. 테스트를 위해 1150px에서이 바이올린을 확인하거나 최대 너비를 변경하십시오. –

당신은 부트 스트랩에서 컨테이너 클래스가 각 screen-device-width에 고정 너비가있는 래퍼로 데이터를 래핑한다고 언급 했으므로 헤더와 내용에 컨테이너 div를 추가해야합니다 바닥 글 div에 추가하지 않아도됩니다. 당신은 부트 스트랩 프레임 워크를 사용하는 경우 다음과 같은 코드로이 사업부의의에 대해이 다음과 같은 클래스를 사용해야합니다 :

<div class="site-container"> 
    <div class="header"> 
    <div class="container"> 
    </div> 
    </div> 
    <div class="content"> 
    <div class="container"> 
    </div> 
    </div> 
    <div class="footer"> 
    </div> 
</div>

출처

2016-12-20 12:29:13

<style> 
body{ 
    background:url(../image.jpg); 
} 
header { 
    max-width:600px; 
    width:100%; 
    display:block; 
    background:#ccc; 
    height:250px; //header height no need to mention in your work 
    border:1px solid #000; 
    margin:auto; 
} 
#content { 
    max-width:600px; 
    width:100%; 
    display:block; 
    background:#ddd; 
    height:500px; //content height no need to mention in your work 
    border:1px solid #000; 
    margin:auto; 
} 

footer { 
    width:100%; 
    height: 300px; 
    left: 0; 
    background:#000; 
} 
</style>  
<header> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         // Header 
        </div> 
       </div> 
      </div>  
     </header> 
     <section id="content"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         // Content 
        </div> 
       </div> 
      </div>  
     </section> 
     <footer> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         // content here 
        </div> 
       </div> 
      </div>  
     </footer>

데모 : https://jsfiddle.net/q4Lcjmsy/3/

출처

2016-12-20 13:57:12

1. 최대 너비는 줄입니다. 큰 화면을 가리 키십시오. 일반적으로 980px 이상이어야하며 최대 1366px 또는 최대 값이어야합니다. –

2. 마진 : 자동; 큰 화면에 머리글과 내용을 배치하는 데 중요한 역할을 수행합니다. –

3. 위쪽 여백을 원할 경우 여백을 자동으로 변경합니다. 여백 : 20px auto 0 auto; in header css –

부트 스트랩 푸터 (주 내용이지만 전체 너비는

답변

관련 문제