[html] 고정 요소의 내용이 뷰포트의 높이를 초과 할 때만 스크롤 가능하게하려면 어떻게해야합니까?

Program / 글쓴이

나는 메뉴와 내비게이션 링크를 포함하는 웹 페이지의 왼쪽에 div위치 fixed했다. CSS에서 설정된 높이가 없으며 콘텐츠가 높이를 결정하고 너비가 고정됩니다. 문제는 콘텐츠가 너무 많으면 div창이 창 높이보다 커지고 콘텐츠의 일부가 보이지 않는다는 것입니다. (위치가 fixed이고 div스크롤되지 않기 때문에 창을 스크롤해도 도움 이되지 않습니다.)

나는 설정하려고했지만 overflow-y:auto;도움이되지 않습니다 .div는 그것의 일부가 창 밖에 있다는 것을 알지 못하는 것 같습니다.

필요한 경우 내용 div이 창 밖에 있는 경우에만 스크롤 할 수 있도록하려면 어떻게해야 합니까?

답변

당신은 아마 할 수 없습니다. 여기에 가까운 것이 있습니다. 아래에 공간이 있으면 콘텐츠가 흐르지 않습니다.

http://jsfiddle.net/ThnLk/1289

.stuck {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 180px;
    overflow-y: scroll;
}

백분율 높이도 할 수 있습니다.

http://jsfiddle.net/ThnLk/1287/

.stuck {
    max-height: 100%;
}

답변

아래 링크는 내가이 작업을 수행 한 방법을 보여줍니다. 그다지 어렵지 않습니다. 영리한 프런트 엔드 개발자를 사용해야합니다 !!

<div style="position: fixed; bottom: 0%; top: 0%;">

    <div style="overflow-y: scroll; height: 100%;">

       Menu HTML goes in here

    </div>

</div>

http://jsfiddle.net/RyanBrackett/b44Zn/

답변

내부 div가 필요할 것입니다. CSS를 사용하면 다음과 같습니다.

.fixed {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   overflow-y: auto;
   width: 200px; // your value
}
.inner {
   min-height: 100%;
}

답변

position : fixed 요소에 이것을 시도하십시오.

overflow-y: scroll;
max-height: 100%;

답변

이것은 flexbox 마법으로 절대적으로 가능합니다. 이 펜을 보세요 .

다음과 같은 CSS가 필요합니다.

aside {
  background-color: cyan;
  position: fixed;
  max-height: 100vh;
  width: 25%;
  display: flex;
  flex-direction: column;
}

ul {
  overflow-y: scroll;
}

section {
  width: 75%;
  float: right;
  background: orange;
}

이것은 IE10 + 에서 작동합니다.

답변

다음은 순수한 HTML 및 CSS 솔루션입니다.

  1. 위치가 고정 된 navbar 용 컨테이너 상자를 만듭니다. 높이 : 100 %;

  2. 그런 다음 높이가 100 % 인 내부 상자를 만듭니다. overflow-y : 스크롤;

  3. 다음으로 그 상자 안에 내용물을 넣습니다.

다음은 코드입니다.

.nav-box{
        position: fixed;
        border: 1px solid #0a2b1d;
        height:100%;
   }
   .inner-box{
        width: 200px;
        height: 100%;
        overflow-y: scroll;
        border: 1px solid #0A246A;
    }
    .tabs{
        border: 3px solid chartreuse;
        color:darkred;
    }
    .content-box p{
      height:50px;
      text-align:center;
    }
<div class="nav-box">
  <div class="inner-box">
    <div class="tabs"><p>Navbar content Start</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content End</p></div>
    </div>
</div>
<div class="content-box">
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
</div>

스 니펫 확장

jsFiddle에 연결 :

답변

나는 이것을 해결책이 아닌 해결 방법 으로 제시 하고 있습니다. 이것은 항상 작동하지 않을 수 있습니다. 매우 기괴한 환경에서 내부 용으로 매우 기본적인 HTML 페이지를 만들면서 이렇게했습니다. 정말 멋진 탐색 모음을 수행 할 수있는 MaterializeCSS와 같은 라이브러리가 있다는 것을 알고 있습니다. (사용하려고했지만 내 환경에서 작동하지 않았습니다.)

<div id="nav" style="position:fixed;float:left;overflow-y:hidden;width:10%;"></div>
<div style="margin-left:10%;float:left;overflow-y:auto;width:60%;word-break:break-all;word-wrap:break-word;" id="content"></div>