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

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

---

나는 메뉴와 내비게이션 링크를 포함하는 웹 페이지의 왼쪽에 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%;
}

---

이것은 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 + 에서 작동합니다.

---

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

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

---

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

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

2. Then we create an inner box with height: 100%; overflow-y: scroll;

3. Next, we put out content inside that box.

Here is the code:

.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>

Link to jsFiddle:

---

I'm presenting this as a workaround rather than a solution. This may not work all the time. I did it this way as I'm doing a very basic HTML page, for internal use, in a very bizarre environment. I know there are libraries like MaterializeCSS that can do really nice nav bars. (I was going to use them, but it didn't work with my environment.)

<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>

---

Add this to your code for fixed height and add one scroll.

.fixedbox {
    max-height: auto;
    overflow-y: scroll;
}

참고URL : https://stackoverflow.com/questions/18894400/how-can-i-make-the-contents-of-a-fixed-element-scrollable-only-when-it-exceeds-t