전체 폭 부서 사용 HTML5and CSS3(응답)

StackOverflow https://stackoverflow.com//questions/25076798

  •  02-01-2020
  •  | 
  •  

문제

나는 상대적으로 새로운 유래하고 이에 어려움을 겪는 동안 웹 페이지의

그래서 내가 필요로하는 것은 한 페이지의 웹사이트으로 나누어 서로 다른 섹션에서는 전체 폭 div(i.전자 100%로 폭의 화면)그리고 연속적으로 다른 배경 색상.

문제 내가 직면하는 div 지하지 않습의 화면 흰색 공간뿐만 아니라면,그러나 또한 사 div2
또한,윈도우 크기가 줄어들 간의 간격 div 증가

원하는 결과가 관찰로서 다음 웹 사이트:

http://classrebels.com/
http://startbootstrap.com/templates/freelancer/

코드가 나를 사용하여 다음과 같습니다:

i)HTML:

    <html>
    <body>
    <div class="full" id="one">
    <h1>Just something</h1>
    </div>
    <div class="full" id="two">
    <h1>Just something</h1>
    </div>
    </body>
    </html>

ii)CSS:

    .full{
    width= 100%;
     }
    #one{
     background-color: #fff;
    }  
    #two{
     background-color: #f13;
    }

저에게 말하십시오 나는 잘못된 것

도움이 되었습니까?

해결책

데모

html 

<div class="full" id="one">
     <h1>Just something</h1>
</div>
<div class="full" id="two">
     <h1>Just something</h1>
</div>
.

CSS 

body, html {
    width: 100%;
    height: 100%;
    margin:0; /* default margin set to 0 */
    padding:0; /* default padding set to 0 */
}
.full {
    width: 100%;
}
#one {
    background-color: gray;
    height: 50%; /* whatever you want to give height */
}
#two {
    background-color: #f13;
    height: 50%; /* whatever you want to give height */
}
.full h1 {
    margin:0; /* default margin of h1 tag set to 0 */
    padding: 20px 10px 10px 20px; /* padding if you want to give spaces between borders and content of div */
}
.

다른 팁

데모 바이올린

뷰포트 (WhiteSpace를 제공하는) 뷰포트에서 기본 여백 / 패딩을 제거하려면 다음 CSS를 추가해야합니다. 

html, body{
  width:100%; /* <-- also a good idea to add */
  margin:0;
  padding:0;
}
.

및 변경 : 

.full{
  width= 100%;
}
.

to : 

.full{
  width:100%;
}
.

CSS 스타일 속성 / 값 쌍은 콜론 :로 분리되어 Equals =

가 아닙니다.

마진을 설정하고 0을 완전히 넣고 바디 태그로 설정했습니다.

처럼 
 .full
{
    width :100%;
   margin:0px;
   padding:0px;
     }
.

마찬가지로 표제는 또한 몇 가지 마진을 필요로하므로 필요에 따라 제목의 여백을 설정합니다. 더 나은이 링크를 참조하십시오 W3Schools

브라우저에 기본값이 기본값이 있으므로 몸과 H1 여백을 변경해야합니다. 이 바이올린에서 당신을 위해 그것을 고쳤습니다. 

h1{
  margin: 0px;
}
body{
  border: 0px;
  padding: 0px;
  margin: 0px;
}
.

http://jsfiddle.net/pwlgb/

문제는 당신이 전체 div를 배경색을주지 않고 텍스트만을주지 않는다는 것입니다.

테두리를 광고하면 DIV의 실제 크기를 볼 수 있으며 전체 DIV를 색상으로 채울 것입니다.

그 바이올린을 확인하십시오 

 border: 1px solid black;
.

http://jsfiddle.net/2h4kq/

보이지 않도록 테두리를 0px로 설정하고 올바른 결과를 줄 수 있습니다

데모는 당신은 링크를 사용하지 않는 전체 폭 div.그들이 실제로 사용하여 전체 너비 <section> 요소는 배경 색상을 설정합니다.

그런 다음,그들은 내면의 행 <div> 는 다음에는 컨테이너를 열고 <div>.그래서에서 프리랜서를 들어 그림으로 보면 다음과 같습니다.

<section class="success" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>About</h2>
                    <hr class="star-light">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-lg-offset-2">
                    <p>Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
                </div>
                <div class="col-lg-4">
                    <p>Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
                </div>
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <a href="#" class="btn btn-lg btn-outline">
                        <i class="fa fa-download"></i> Download Theme
                    </a>
                </div>
            </div>
        </div>
    </section>

샘플 CSS:

section.success {
color: #fff;
background: #18bc9c;
}

.container {
width: 1170px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}

다운로드는 템플릿 사용 스트랩, 고,그것을 가지고 놀이를 얻을 수 있습니다.*

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top