1. 首页
  2. 问答
  3. 关于100％高度和滚动条的布局问题-Y

关于100％高度和滚动条的布局问题-Y

2017-07-27 72 views
-1

我有一个令人沮丧的问题，不知道如何正确地布置这个问题，我的问题是我打算通过拥有一个干净的100％高度框架没有溢出，然后有两个需要scrollbar-y和溢出隐藏的特定区域，同时仍然可以具有诸如聊天控件之类的元素，并且还在聊天主题之上。关于100％高度和滚动条的布局问题-Y

Example of Intended Layout

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

什么我需要改变，以达到理想的布局？谢谢。

来源

2017-07-27 Jack_Saurus

+0

方式很多代码 –

回答

0

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看到在行动。

来源

2017-07-27 13:31:17

+1

谢谢！像魅力一样工作。 –

相关问题

 相关问题