%를 사용하여 콘텐츠 높이 / 너비 마크 업?

WebDesignNub

나는 지난 며칠 동안 프론트 엔드 웹 디자인을 가지고 놀았는데 주로 float / clearfix를 사용하여 내 콘텐츠를 배치했습니다. %를 사용하여 콘텐츠의 너비를 표시했는데 완벽하게 작동했습니다.

그러나 높이를 전체 페이지의 백분율로 정의하려고하면 작동하지 않습니다. 더 정확하게는 콘텐츠가있는 내용을 감싸는 것처럼 보이며 높이를 px 값으로 정의해야합니다.

이것에 대한 이유가 있습니까? 백분율 값을 사용할 수 있고 실제로 페이지를 분할하는 해결 방법이 있습니까?

DaniP

속성을 정의하려면 height에서 %상위에 이전 정의가 필요합니다 height. 그런 다음 고정을 가진 부모가있는 경우 heightpx당신이 작업을 할 수 있습니다 %; 그러나 창 또는 다른 % 값과 관련하여 %를 작업하려면 모든 부모에 대한 값을 설정해야합니다.

그런 다음 창 %로 작업하려면 다음이 필요합니다.

다음과 같은 HTML :

<body>
  <div id="container">My div with 100% height</div>
</body>

CSS는 다음과 같습니다.

/*Need to set all parents to 100%*/
html, body {
  height:100%;
}
/*Then set the container*/
#container {
   height:100%;
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

비디오 마크 업이 Dartium에서 콘텐츠를 표시하지 않습니다.

분류에서Dev

UIWebView 콘텐츠 너비를 사용자 지정 크기로

분류에서Dev

Flexbox를 사용하여 고정 너비 사이드 바를 유연한 콘텐츠에 맞추는 방법

분류에서Dev

콘텐츠 상자를 사용하여 높이 오프셋

분류에서Dev

HTML 마크 업없이 React Quill의 콘텐츠를 렌더링하는 방법은 무엇입니까?

분류에서Dev

콘텐츠 제공 업체를 사용하여 DB에서 데이터로드

분류에서Dev

탐색 메뉴를 사용하여 콘텐츠 컨테이너 변경

분류에서Dev

Beaufifulsoup 및 Requests를 사용하여 웹 사이트에서 콘텐츠 스크랩

분류에서Dev

서비스를 사용하지 않고 JSON 응답을 통해 ListView 콘텐츠 업데이트

분류에서Dev

CSS를 사용하여 스크롤바없이 콘텐츠 스크롤

분류에서Dev

가로 스크롤바를 표시하는 콘텐츠 너비 100 %

분류에서Dev

pdfbox를 사용하여 페이지 콘텐츠 높이를 얻는 방법

분류에서Dev

'#if DEBUG'및 '#endif'가 두 마크 사이의 콘텐츠를 제거하는 방법

분류에서Dev

JS가 더 많은 콘텐츠를 표시하는 데 사용한 후 backgound div를 100 % 너비 및 높이로 유지

분류에서Dev

CSS를 사용하여 div 높이를 콘텐츠에 맞추는 방법

분류에서Dev

한 Docker 컨테이너의 콘텐츠를 다른 컨테이너에 제공 / 업데이트하는 방법

분류에서Dev

디스플레이 테이블 셀을 사용하여 콘텐츠 마진이 다른 사업부에 의존

분류에서Dev

<iframe>의 너비와 높이에 따라 콘텐츠 크기 자동 조정

분류에서Dev

SPServices를 사용하여 페이지의 콘텐츠를 업데이트하는 방법은 무엇입니까?

분류에서Dev

파일 크기와 너비를 사용하여 이미지 높이 계산

분류에서Dev

CSS를 사용하여 콘텐츠의 가로 세로 비율을 유지하는 전체 너비 슬라이더를 만들 수 있습니까?

분류에서Dev

Python을 사용하여 XML 파일 콘텐츠를 찾고 업데이트하는 방법

분류에서Dev

CSS 콘텐츠 속성에서 작동하지 않는 높이 및 너비

분류에서Dev

자바 스크립트를 사용하여 iframe 너비와 높이 변경

분류에서Dev

의사 콘텐츠 속성의 높이 부모 요소의 너비를 줄이면 증가하는 이유는 무엇입니까?

분류에서Dev

RouterLink가 콘텐츠를 업데이트하지 않음

분류에서Dev

UIlabel의 콘텐츠를 업데이트하는 방법

분류에서Dev

TextBlock은 콘텐츠를 업데이트하지 않습니다.

분류에서Dev

jquery / javascript를 사용하여이 비디오 스타일의 콘텐츠 상자로 스크롤하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    비디오 마크 업이 Dartium에서 콘텐츠를 표시하지 않습니다.

  2. 2

    UIWebView 콘텐츠 너비를 사용자 지정 크기로

  3. 3

    Flexbox를 사용하여 고정 너비 사이드 바를 유연한 콘텐츠에 맞추는 방법

  4. 4

    콘텐츠 상자를 사용하여 높이 오프셋

  5. 5

    HTML 마크 업없이 React Quill의 콘텐츠를 렌더링하는 방법은 무엇입니까?

  6. 6

    콘텐츠 제공 업체를 사용하여 DB에서 데이터로드

  7. 7

    탐색 메뉴를 사용하여 콘텐츠 컨테이너 변경

  8. 8

    Beaufifulsoup 및 Requests를 사용하여 웹 사이트에서 콘텐츠 스크랩

  9. 9

    서비스를 사용하지 않고 JSON 응답을 통해 ListView 콘텐츠 업데이트

  10. 10

    CSS를 사용하여 스크롤바없이 콘텐츠 스크롤

  11. 11

    가로 스크롤바를 표시하는 콘텐츠 너비 100 %

  12. 12

    pdfbox를 사용하여 페이지 콘텐츠 높이를 얻는 방법

  13. 13

    '#if DEBUG'및 '#endif'가 두 마크 사이의 콘텐츠를 제거하는 방법

  14. 14

    JS가 더 많은 콘텐츠를 표시하는 데 사용한 후 backgound div를 100 % 너비 및 높이로 유지

  15. 15

    CSS를 사용하여 div 높이를 콘텐츠에 맞추는 방법

  16. 16

    한 Docker 컨테이너의 콘텐츠를 다른 컨테이너에 제공 / 업데이트하는 방법

  17. 17

    디스플레이 테이블 셀을 사용하여 콘텐츠 마진이 다른 사업부에 의존

  18. 18

    <iframe>의 너비와 높이에 따라 콘텐츠 크기 자동 조정

  19. 19

    SPServices를 사용하여 페이지의 콘텐츠를 업데이트하는 방법은 무엇입니까?

  20. 20

    파일 크기와 너비를 사용하여 이미지 높이 계산

  21. 21

    CSS를 사용하여 콘텐츠의 가로 세로 비율을 유지하는 전체 너비 슬라이더를 만들 수 있습니까?

  22. 22

    Python을 사용하여 XML 파일 콘텐츠를 찾고 업데이트하는 방법

  23. 23

    CSS 콘텐츠 속성에서 작동하지 않는 높이 및 너비

  24. 24

    자바 스크립트를 사용하여 iframe 너비와 높이 변경

  25. 25

    의사 콘텐츠 속성의 높이 부모 요소의 너비를 줄이면 증가하는 이유는 무엇입니까?

  26. 26

    RouterLink가 콘텐츠를 업데이트하지 않음

  27. 27

    UIlabel의 콘텐츠를 업데이트하는 방법

  28. 28

    TextBlock은 콘텐츠를 업데이트하지 않습니다.

  29. 29

    jquery / javascript를 사용하여이 비디오 스타일의 콘텐츠 상자로 스크롤하는 방법은 무엇입니까?

뜨겁다태그

보관