Question

我有一个令人沮丧的问题，因为我不知道如何正确布局这个问题，我遇到的问题是我打算通过一个干净的100％高度框架没有溢出然后有两个特定区域来实现需要滚动条和溢出隐藏，同时仍然可以有下面的元素，如聊天控件，以及上面的聊天主题。

的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;
}

我需要更改什么才能实现所需的布局？感谢。

Answer 1

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

这确保了右侧的侧边栏，聊天区域有一个顶部/底部栏以填充左侧的剩余空间。一个小小的here可以看到它的实际效果。

有关100％高度和滚动条的布局问题

1 个答案: