반응 - 구성 요소 전체 화면(높이 100%)

반응 - 구성 요소 전체 화면(높이 100%)

화면 높이의 100%를 차지하는 '홈'이라는 이름의 React 컴포넌트를 표시해야 합니다.CSS나 React 인라인 스타일을 사용해도 동작하지 않습니다.

다음 예에서는 html, body 및 #app을 높이: CSS에서 100%로 설정합니다..home에서는 인라인 스타일을 사용했습니다(단, CSS 또는 인라인 스타일을 사용한 것은 모두 동일합니다). 이 문제는 에서 발생한 것으로 보인다.<div data-reactroot data-reactid='1'>100퍼센트

Chrome 개발자 도구로 해킹하면 다음과 같은 작업이 수행됩니다.

그렇다면 React에서 풀 하이트 구성 요소를 표시하는 올바른 방법은 무엇일까요?

어떤 도움이라도 환영합니다:)

html, body, #app, #app>div {
  height: 100%
}

, 「체인지」가 .height: 100%

다음 작업도 가능합니다.

body > #root > div {
  height: 100vh;
}

해보다<div style = {{height:"100vh"}}> </div>

며칠 동안 짜증나요.마지막으로 CSS 속성 셀렉터를 사용하여 문제를 해결합니다.

[data-reactroot] 
        {height: 100% !important; }

여기서 React를 사용해도 요소 레이아웃은 완전히 html/css 기능입니다.

의 근본 은 어떻게 하면 .height속성을 지정합니다.높이에 상대 값(%)을 사용하는 경우 - 높이가 부모에 대해 설정됨을 의미합니다.

만약에 요.html > body > div#root > div.app - 만들기 - 만들다div.app모든 조상들의 키는 100%여야 한다.다음 예제를 사용할 수 있습니다.

html {
  height: 100%;
}

body {
  height: 100%;
}

div#root {
  height: 100%; /* remove this line to see div.app is no more 100% height */
  background-color: indigo;
  padding: 0 30px;
}

div.app {
  height: 100%;
  background-color: cornsilk;
}

<div id="root">
  <div class="app"> I will be 100% height if my parents are </div>
</div>

몇 가지 인수:

• 「 」의 !important이은 95%까지사용할 수 html/가 좋지 을 나타냅니다 95%는 html/css는 html/css로 되어 있습니다.또한, 이것은 현재의 문제에 대한 해결책이 아닙니다.
• 안 돼?position: absolute.소유물positon는 (소유 위치 - 상대, 뷰 포트 - 고정, 가장 가까운 부모 위치가 정적 - 절대 위치가 아닌)와 관련하여 요소를 렌더링하는 방법을 변경하도록 설계되어 있습니다.에도 position: absolute; top: 0; right: 0; bottom: 0; left: 0; 부모도 .부모를 바꾸도록 강요받기도 합니다.position 않는 static 두 요소를 - 두 가지 요소를 유지해야 돼요.그러면 부모 div가 한 줄(0-높이) 및 내부 전체 화면으로 축소됩니다.그러면 요소 검사기가 혼란스러워집니다.

앱의 css 클래스로 관리했습니다.css

.fill-window {
    height: 100%;
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
}

render() 메서드의 루트 요소에 적용합니다.

render() {
   return ( <div className="fill-window">{content}</div> );
}

또는 인라인

render() {
   return (
      <div style={{ height: '100%', position: 'absolute', left: '0px', width: '100%', overflow: 'hidden'}}>
          {content}
      </div>
   );
}

#app {
  height: 100%;
  min-height: 100vh;
}

항상 최대 표시 높이(최소

이것이 이상적인 답은 아닐 수 있지만, 다음을 시도해 보십시오.

style={{top:'0', bottom:'0', left:'0', right:'0', position: 'absolute'}}

테두리에 붙어 있는 사이즈를 유지하여 원하는 사이즈는 아니지만 어느 정도 같은 효과를 얻을 수 있습니다.

body{
  height:100%
}

#app div{
  height:100%
}

난 이게 좋아..

<div style={{ height: "100vh", background: "#2d405f" }}>
   <Component 1 />
   <Component 2 />
</div>

배경색 #2d405f의 전체 화면으로 div 만들기

측면 네비게이션 패널 높이가 100%로 표시되는 것과 같은 문제가 있었습니다.

이 문제를 해결하기 위한 제 단계는 다음과 같습니다.

index.css 파일 -------

.html {
   height: 100%;
}
.body {
   height:100%;
}

sidePanel.css(이 때문에 문제가 발생했습니다)에서:

.side-panel {
   height: 100%;
   position: fixed; <--- this is what made the difference and scaled to 100% correctly
}

다른 속성은 명확성을 위해 제외되었지만, 문제는 중첩된 컨테이너에서 높이를 100%까지 확장하는 데 있다고 생각합니다. 예를 들어 중첩된 컨테이너에서 높이를 조정하는 방식입니다.부모 클래스의 높이를 100% 적용해야 합니다.- 내가 궁금한 것은 왜 고정된가 하는 것이다: 위치가 척도를 교정하고 그것이 없으면 실패한다; 이것은 내가 더 많은 연습을 통해 알게 될 것이다.

저는 리액션과 1주일 동안 일했고 웹 개발은 초보자이지만 높이를 100%까지 확장하여 발견한 수정 사항을 공유하고 싶었습니다.저는 이것이 당신이나 비슷한 문제를 안고 있는 사람들에게 도움이 되기를 바랍니다.행운을 빕니다.

CRNA에서 합니다.index.css

html, body, #root {
  height: 100%;
}

그리고 내 App.css에서는 이것을 사용합니다.

.App {
  height: 100%;
}

또한 앱 내 div의 높이를 100%로 설정합니다.

.MainGridContainer {
  display: grid;
  width: 100%;
  height:100%;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 50px auto;
}

문제를 해결하려면 이 방법을 사용하세요.

<div style = {{height:"100vh"}}> </div>

이 index.html다음 중 하나:

<style>
    html, body, #app, #app>div { position: absolute; width: 100% !important; height: 100% !important; }
</style>

인스펙터를 사용하기 전까지는 힘들었지만, 리액션이 모든 것을 id='root'의 div 안에 넣었다는 것을 깨달았습니다.높이는 100%이고 본문과 html이 통합니다.

CRA에는 리액트 앱을 렌더링하는 #root div가 있으므로 부모 div로 간주하여 필요에 따라 적절한 높이를 부여해야 합니다.이 답변은 비슷한 상황에 대한 제 경험을 바탕으로 한 것입니다.#root에 100% 높이를 부여하면 #root의 자 요소 중 하나에서 높이 문제를 해결할 수 있습니다.

앱 레이아웃에 따라 다르지만, 내 경우 #root(부모) div의 키가 지정되지 않았기 때문에 아이가 지정된 높이를 차지하지 못했습니다.

재밌네요....html 하이트가 것이 되었습니다.body.

됩니다.cssindex.css:

body{
  height: 100%;
}

하고 있는 것이 있습니다.body?? 기에!!

저는 현재 이를 위해 NextJs 13 & Tailwind 촬영에 어려움을 겪고 있습니다.Next의 새로운 AppDir에서 생성된 <div>의 추가 레이어를 찾을 수 없습니다.

아무도 언급하지 않은 트러블 슈팅 방법 중 하나는 간과하기 쉬운 것입니다.

Web Dev Tools를 열고 각 상위 항목을 높이: 100% 또는 테일윈드 'h-full'로 수정하면 사용 사례에 적합한 솔루션인지 확인할 수 있습니다.나는 시간을 낭비하는 대신 내 바닥글 컴포넌트와 이 방법이 겹친다는 것을 금방 알 수 있었다.

편집: 다음 13 사용자의 이유 https://github.com/vercel/next.js/issues/42345

!important 키를 사용해 보세요.html 본문에 영향을 주는 다른 스타일 때문일 수 있습니다.

{ height : 100% !important; }

또한 VP로 값을 지정하면 다음과 같은 포트 픽셀의 높이를 설정할 수 있습니다.height : 700vp;이건 휴대할 수 없을 거예요.

언급URL : https://stackoverflow.com/questions/38428322/react-component-full-screen-with-height-100