내 너비가 내 화면보다 크지 만 body 및 html이 0으로 설정되어 있습니다. 여백과 여백 및 100 % 너비

Question

부트 스트랩을 제거한 후 페이지 폭이 화면보다 커지고이 문제가 발생했습니다. 결과적으로 수평 스크롤 바입니다. 나는 시체를 설정, 0 패딩 및 여백뿐만 아니라 100 % 너비 괜찮을 것이라고 html로 생각했지만 문제가 지속됩니다.

해결책 편집 : 나는보기보다 넓은 이미지가있어서 box-sizing: border-box을 설정해야했습니다. 부모의 이미지를 포함합니다. 그런 다음 모든 요소에 대해 이것을 상속 받았다. 그래서 지금 내 CSS의 상단은 다음과 같습니다

body, html { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    box-sizing: border-box; 
} 

* { 
    box-sizing: inherit; 
} 

HTML :

@{ 
    ViewBag.Title = "Home Page"; 
} 
<div class="main"> 
    <div class="content"> 
     <div id="welcome" class="page"> 
      <h1>asasd</h1> 
      <p> 
       test3 
      </p> 
     </div> 
     <div id="asdasd" class="page" data-original="/Images/asdh.jpg"> 
      <h1>asdasd</h1> 
      <p> 
       test2 
      </p> 
      <div class="vfd"></div> 
      <div class="measurment"></div> 
     </div> 
     <div id="test2" class="page" data-original="/Images/test.jpg"> 
      <h1></h1> 
      <p>test 
      </p> 
     </div> 
    </div> 
</div> 

CSS :

body, html { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 

.main { 
    width: 100%; 
    height: 100%; 
} 

.content { 
    display: flex; 
    flex-direction: column; 
    align-items: stretch; 
    padding: 0; 
    height: 300vh; 
} 

.page { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    height: 100%; 
    position: relative; 
    width: 100%; 
    text-align: center; 
    vertical-align: middle; 
    font-size: 18px; 
    padding-left: 25%; 
    padding-right: 25%; 
} 

Answer 1

이 화면 폭 오버 플로우를하고 어떤 이미지인가? 여백 및 채우기를 처리하는 데 항상 상자 크기 조정을 사용할 수 있습니다.

Answer 2

너비가 들어갈 수 있도록 너비가 box-sizing: border-box;이어야합니다. 그렇지 않으면 실제 너비는 100 % + 25 % + 25 % = 150 %입니다.

CSS3 상자 크기 조정 재산권

내용 상자 기본입니다. width 및 height 속성 (및 min/max 속성)에는 내용 만 포함됩니다. 경계, 패딩, 또는 마진

경계 박스 너비와 높이 속성 (및 최소/최대 특성) 함량, 패딩 및 경계를 포함하지만 마진을 포함하지

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.main { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.content { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: stretch; 
 
    padding: 0; 
 
    height: 300vh; 
 
} 
 

 
.page { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100%; 
 
    position: relative; 
 
    width: 100%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    font-size: 18px; 
 
    padding-left: 25%; 
 
    padding-right: 25%; 
 
    box-sizing: border-box; 
 
}

<div class="main"> 
 
    <div class="content"> 
 
     <div id="welcome" class="page"> 
 
      <h1>asasd</h1> 
 
      <p> 
 
       test3 
 
      </p> 
 
     </div> 
 
     <div id="asdasd" class="page" data-original="/Images/asdh.jpg"> 
 
      <h1>asdasd</h1> 
 
      <p> 
 
       test2 
 
      </p> 
 
      <div class="vfd"></div> 
 
      <div class="measurment"></div> 
 
     </div> 
 
     <div id="test2" class="page" data-original="/Images/test.jpg"> 
 
      <h1></h1> 
 
      <p>test 
 
      </p> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

그냥 CSS에서이 부분을 교체하고 가로 스크롤 사라됩니다

.content { 
     display:inline-block; 
     /*display: flex; 
     flex-direction: column; 
     align-items: stretch;*/ 
     padding: 0; 
     height: 300vh; 
} 

그러나 나는 당신이 그 CSS 코드로 성취하려는 것을 정말로 이해하지 못합니다.