100 % 높이 및 스크롤바와 관련된 레이아웃 문제

debugcn 에 게시 Dev

Jack_Saurus

나는 이것을 올바르게 레이아웃하는 방법을 정확히 알지 못하는 실망스러운 문제가 있습니다. 내가 가진 문제는 넘치지 않고 깨끗한 100 % 높이 프레임을 가진 다음 스크롤 막대가 필요한 두 개의 특정 영역을 가짐으로써 달성하려는 것입니다. y 및 오버플로가 숨겨지면서 채팅 컨트롤과 같은 아래 요소와 채팅 주제와 같은 상위 요소를 계속 가질 수 있습니다.

의도 된 레이아웃의 예

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Chat Application</title>
  <link rel="stylesheet" href="assets/css/normalize.css">
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

<div class="chat-app">

  <!--<div class="top-bar">

    <div class="tools">

      <ul class="tools__menu menu">
        <li class="tools__item menu__item"><a href="#" class="tools__link menu__link">Rooms</a></li>
        <li class="tools__item menu__item"><a href="#" class="tools__link menu__link">Settings</a></li>
        <li class="tools__item menu__item"><a href="#" class="tools__link menu__link">My Profile</a>
          <ul class="tools__dropdown">
            <li class="dropdown__item"><a href="#" class="dropdown__link">Edit My Profile</a>
          </ul>
        </li>
      </ul>

    </div>

  </div> -->

  <div class="chat-body">

    <div class="chat-window">

      <div class="chat-topic">Welcome to General Chat! This is an example topic which can be changed via the moderation options.</div>

      <div class="chat-area">

        <div class="chat-messages">

          <ul class="chat-messages__menu menu">

            <li class="chat-messages__chat-message">
              <div class="chat-messages__avatar"><a href="#" class="chat-messages__link"><img src="assets/img/avatar_0.png" src="Guest" class="user-list__img"></a></div>
              <div class="chat-messages__info">
                <div class="chat-messages__name"><a href="#" class="chat-messages__link">Guest</a> <span class="chat-messages__timestamp">10:00 AM</span></div>
                <div class="chat-messages__message">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
              </div>
            </li>

            <li class="chat-messages__chat-message">
              <div class="chat-messages__avatar"><a href="#" class="chat-messages__link"><img src="assets/img/avatar_1.png" src="Guest" class="user-list__img"></a></div>
              <div class="chat-messages__info">
                <div class="chat-messages__name"><a href="#" class="chat-messages__link">Guest</a> <span class="chat-messages__timestamp">10:21 AM</span></div>
                <div class="chat-messages__message">Nunc fringilla sagittis magna, et laoreet dui faucibus ut. Phasellus eu eros tristique.</div>
              </div>
            </li>

            <li class="chat-messages__chat-message">
              <div class="chat-messages__avatar"><a href="#" class="chat-messages__link"><img src="assets/img/avatar_2.png" src="Guest" class="user-list__img"></a></div>
              <div class="chat-messages__info">
                <div class="chat-messages__name"><a href="#" class="chat-messages__link">Guest</a> <span class="chat-messages__timestamp">10:24 AM</span></div>
                <div class="chat-messages__message">Pellentesque aliquam odio ac consectetur suscipit. Integer euismod varius enim aliquet feugiat. Aliquam dapibus nulla eu lacinia finibus. Donec diam turpis, efficitur eu erat a, commodo malesuada.</div>
              </div>
            </li>

            <li class="chat-messages__chat-message">
              <div class="chat-messages__avatar"><a href="#" class="chat-messages__link"><img src="assets/img/avatar_3.png" src="Guest" class="user-list__img"></a></div>
              <div class="chat-messages__info">
                <div class="chat-messages__name"><a href="#" class="chat-messages__link">Guest</a> <span class="chat-messages__timestamp">10:24 AM</span></div>
                <div class="chat-messages__message">Pellentesque aliquam odio ac consectetur suscipit.</div>
              </div>
            </li>

          </ul>

        </div>

      </div>

      <div class="chat-footer">

        <form class="chat-form">
          <input type="text" placeholder="Message" class="chat-form__input">
          <button type="submit" class="chat-form__btn">Send</button>
        </form>

      </div>

    </div>

    <div class="user-list">

      <div class="user-list__header">

        <div class="user-list__title">Members <span class="user-list__online">5 Online</span></div>

        <div class="user-list__search">

          <form class="search__form">

            <input type="text" placeholder="Search Username..." class="search__input">
            <button type="submit" class="search__btn"></button>

          </form>

        </div>

      </div>

      <div class="user-list__body">

        <ul class="user-list__menu menu">

          <li class="user-list__item">
            <a href="#" class="user-list__link">
              <div class="user-list__avatar"><img src="assets/img/avatar_0.png" src="Chat Bot" class="user-list__img"><span class="user-list__status user-list__status--busy" title="Busy"></span></div>
              <div class="user-list__info">
                <div class="user-list__name">Chat Bot</div>
                <div class="user-list__role">System Bot</div>
              </div>
            </a>
          </li>

          <li class="user-list__item">
            <a href="#" class="user-list__link">
              <div class="user-list__avatar"><img src="assets/img/avatar_1.png" src="Guest" class="user-list__img"><span class="user-list__status" title="Available"></span></div>
              <div class="user-list__info">
                <div class="user-list__name">Guest</div>
                <div class="user-list__role">Administrator</div>
              </div>
            </a>
          </li>

          <li class="user-list__item">
            <a href="#" class="user-list__link">
              <div class="user-list__avatar"><img src="assets/img/avatar_2.png" src="Guest" class="user-list__img"><span class="user-list__status user-list__status--away" title="Away"></span></div>
              <div class="user-list__info">
                <div class="user-list__name">Guest</div>
                <div class="user-list__role">Administrator</div>
              </div>
            </a>
          </li>

          <li class="user-list__item">
            <a href="#" class="user-list__link">
              <div class="user-list__avatar"><img src="assets/img/avatar_3.png" src="Midnight Oil" class="user-list__img"><span class="user-list__status" title="Available"></span></div>
              <div class="user-list__info">
                <div class="user-list__name">Midnight Oil</div>
                <div class="user-list__role">Member</div>
              </div>
            </a>
          </li>

          <li class="user-list__item">
            <a href="#" class="user-list__link">
              <div class="user-list__avatar"><img src="assets/img/avatar_4.png" src="Dean Martin" class="user-list__img"><span class="user-list__status" title="Available"></span></div>
              <div class="user-list__info">
                <div class="user-list__name">Dean Martin</div>
                <div class="user-list__role">Guest</div>
              </div>
            </a>
          </li>

          <li class="user-list__item">
            <a href="#" class="user-list__link">
              <div class="user-list__avatar"><img src="assets/img/default.png" src="Guest1324" class="user-list__img"><span class="user-list__status" title="Available"></span></div>
              <div class="user-list__info">
                <div class="user-list__name">Guest1324</div>
                <div class="user-list__role">Guest</div>
              </div>
            </a>
          </li>

          <li class="user-list__item">
            <a href="#" class="user-list__link">
              <div class="user-list__avatar"><img src="assets/img/default.png" src="Guest6424" class="user-list__img"><span class="user-list__status" title="Available"></span></div>
              <div class="user-list__info">
                <div class="user-list__name">Guest6424</div>
                <div class="user-list__role">Guest</div>
              </div>
            </a>
          </li>

          <li class="user-list__item">
            <a href="#" class="user-list__link">
              <div class="user-list__avatar"><img src="assets/img/default.png" src="Guest1414" class="user-list__img"><span class="user-list__status" title="Available"></span></div>
              <div class="user-list__info">
                <div class="user-list__name">Guest1414</div>
                <div class="user-list__role">Guest</div>
              </div>
            </a>
          </li>

          <li class="user-list__item">
            <a href="#" class="user-list__link">
              <div class="user-list__avatar"><img src="assets/img/default.png" src="Guest1113" class="user-list__img"><span class="user-list__status" title="Available"></span></div>
              <div class="user-list__info">
                <div class="user-list__name">Guest1113</div>
                <div class="user-list__role">Guest</div>
              </div>
            </a>
          </li>

          <li class="user-list__item">
            <a href="#" class="user-list__link">
              <div class="user-list__avatar"><img src="assets/img/default.png" src="Guest4224" class="user-list__img"><span class="user-list__status" title="Available"></span></div>
              <div class="user-list__info">
                <div class="user-list__name">Guest4224</div>
                <div class="user-list__role">Guest</div>
              </div>
            </a>
          </li>

          <li class="user-list__item">
            <a href="#" class="user-list__link">
              <div class="user-list__avatar"><img src="assets/img/default.png" src="Guest1124" class="user-list__img"><span class="user-list__status" title="Available"></span></div>
              <div class="user-list__info">
                <div class="user-list__name">Guest1124</div>
                <div class="user-list__role">Guest</div>
              </div>
            </a>
          </li>

          <li class="user-list__item">
            <a href="#" class="user-list__link">
              <div class="user-list__avatar"><img src="assets/img/default.png" src="Guest8652" class="user-list__img"><span class="user-list__status" title="Available"></span></div>
              <div class="user-list__info">
                <div class="user-list__name">Guest8652</div>
                <div class="user-list__role">Guest</div>
              </div>
            </a>
          </li>

        </ul>

      </div>

    </div>

  </div>

</div>

</body>
</html>

style.css

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

a {
  text-decoration: none;
}

body {
  background: #f5f5f5;
  font-family: arial;
}

.top-bar {
  background: #333;
}

.chat-app {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__item {
  display: inline-block;
}

.tools {
}

.tools__menu {

}

.tools__item {

}

.tools__link {
  color: #888;
  text-decoration: none;
}

.tools__dropdown {
  display: none;
}

.chat-body {
  display: flex;
  height: 100%;
}

.chat-window {
  flex: 5;
  order: 1;
}

.chat-topic {
  background: #333;
  color: #888;
  padding: 5px 20px;
  border-bottom: 1px solid #fff;
}

.chat-messages__chat-message {
  width: 100%;
  padding: 20px;
  border-bottom: 1px solid #ddd;
}

.chat-messages__avatar {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.chat-messages__info {
  display: inline-block;
  vertical-align: middle;
}

.chat-messages__name {
  font-weight: 700;
}

.chat-messages__link {
  color: #000;
}

.chat-messages__timestamp {
  font-size: 11px;
  color: #bababa;
  margin-left: 5px;
}

.chat-messages__message {
  margin-top: 10px;
}

.chat-footer {
  padding: 20px;
}

.chat-form {
  position: relative;
}

.chat-form__input {
  width: 100%;
  height: 35px;
  padding: 0 15px;
  border: 1px solid #ddd;
}

.chat-form__input::placeholder {
  color: #bababa;
}

.chat-form__btn {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background: #4285f4;
  color: #fff;
  border: 0;
  cursor: pointer;
}

.user-list {
  background: #fff;
  float: right;
  box-shadow: -1px 1px 1px #ddd;
  order: 1;
  flex: 1;
  overflow: hidden;
}

.user-list__header {
  padding: 20px;
  border-bottom: 1px solid #ddd;
}

.user-list__title {
  font-size: 18px;
}

.user-list__online {
  font-size: 14px;
  color: #8dc11b;
  margin-left: 5px;
}

.search__form {
  width: 100%;
  margin-top: 20px;
  position: relative;
}

.search__input {
  background: #fff;
  border: 1px solid #ddd;
  padding: 0 15px;
  height: 35px;
  width: 100%;
}

.search__input::placeholder {
  color: #bababa;
}

.search__btn {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background: none;
  border: 0;
}

.user-list__body {
  overflow-y: scroll;
  height: 100%;
}

.user-list__menu {

}

.user-list__item {

}

.user-list__link {
  display: block;
  text-decoration: none;
  padding: 20px;
  border-bottom: 1px solid #ddd;
}

.user-list__item:nth-child(2n) {
  background: #f5f5f5;
}

.user-list__avatar {
  display: inline-block;
  position: relative;
}

.user-list__info {
  display: inline-block;
  margin-left: 20px;
}

.user-list__name {
  color: #000;
  font-weight: 700;
}

.user-list__role {
  font-size: 11px;
  color: #bababa;
  margin-top: 5px;
}

.user-list__status {
  position: absolute;
  top: -5px;
  right: -5px;
}

.user-list__status:before {
  content: "";
  background: #8dc11b;
  border: 2px solid #fff;
  width: 10px;
  height: 10px;
  display: block;
  border-radius: 100%;
}

.user-list__status--busy:before {
  background: #fc3616;
}

.user-list__status--away:before {
  background: #fcd116;
}

원하는 레이아웃을 얻으려면 무엇을 변경해야합니까? 감사.

G. 헌트

CSS3 측정 vw및 vh와 함께, 전체 높이 레이아웃에 대한 완벽한 calc()인한 인적.

현재 레이아웃이 수정하기에는 너무 구체적이지만 필요에 맞게 조정할 수있는 기본 레이아웃을 만들겠습니다.

HTML :

<div class="page-container">
    <div class="page-chat">
        <div class="page-chat-topbar"></div>
        <div class="page-chat-box"></div>
        <div class="page-chat-commands"></div>
    </div><!--
 --><div class="page-sidebar">
        ...
    </div>
</div>

그리고 CSS :

.page-container {
    height: 100vh;
    width: 100vw;
}

.page-chat {
    height: 100vh;
    width: calc(100vw - 150px);
    display: inline-block;
    vertical-align: top;
}

.page-chat-topbar {
    height: 30px;
    width: 100%;
    background-color: #c7c7c7;
}

.page-chat-commands {
    width: 100%;
    height: 50px;
    background-color: #333;
}

.page-chat-box {
     height: calc(100% - 80px);
     overflow-y: auto;
}

.page-sidebar {
    width: 150px;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    background-color: #f8f8f8;
}

이렇게하면 오른쪽의 사이드 바, 왼쪽의 나머지 공간을 채우기위한 상단 / 하단 막대가있는 채팅 영역이 보장됩니다. 바이올린은 여기에 행동에 볼 수 있습니다.

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

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

에서 수정2021-06-20

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

100 % 높이 및 스크롤바와 관련된 레이아웃 문제

100 % 높이 및 스크롤바와 관련된 레이아웃 문제

녹아웃 및 선택기와 관련된 어레이 필터링 문제

녹아웃 및 선택기와 관련된 어레이 필터링 문제

Wordpress-글꼴 크기 및 이미지 레이아웃과 관련된 Chrome / Safari 문제

Flexbox 레이아웃 및 스크롤바 문제

"상대 레이아웃"과 관련된 레이아웃 문제

19.10 : crypttab 및 업데이트와 관련된 스왑 문제

iOS 수평 스크롤 뷰 및 자동 레이아웃 문제

요소에서 정의 된 높이 (vh)를 사용할 때 Boostrap 그리드, 오버플로 스크롤 및 반응 형 레이아웃 문제

라인 높이와 관련된 CSS 배경 단색 문제

플로트 및 디스플레이와 관련된 Chrome과 Firefox의 레이아웃 차이 : 표

플로트 및 디스플레이와 관련된 Chrome과 Firefox의 레이아웃 차이 : 표

jQuery UI 레이아웃과 관련된 Firefox Select 문제

간격과 관련된 iOS 자동 레이아웃 문제

공백 및 백 스페이스와 관련된 UITextView 입력 문제

바닥 글 (높이) 관련 ListView 문제

마우스 오버시 메뉴 높이 증가와 관련된 CSS 문제

LXC에 하위 컨테이너 배포와 관련된 Juju 및 문제

헤더, 콘텐츠 및 바닥 글이있는 100 % 높이의 Asp.net html 레이아웃

EditText가 동적으로 삽입 될 때 높이와 관련된 Android 문제

입력 태그와 관련된 Chrome 디스플레이 문제

데이터 복사와 관련된 C ++ 스레드 문제

공백이 포함 된 디렉토리 및 파일 이름과 관련된 쉘 스크립트 문제

어레이와 관련된 Monty Hall 시뮬레이션 문제

스타일이 지정된 메뉴 및 madExcept와 관련된 Delphi XE6 문제

밝기 제어 및 비디오 재생과 관련된 NVIDIA 디스플레이 문제

* WPF XAML을 사용하는 실제 행 높이와 관련된 항목 높이

콘텐츠 허깅 및 콘텐츠 압축 저항, 자동 레이아웃 제약 관련 문제

콘텐츠 허깅 및 콘텐츠 압축 저항, 자동 레이아웃 제약 관련 문제

2 열 레이아웃 문제-스태킹 및 플로팅