我正在尝试构建一个页面，并且我希望最后一个div位于底部，但要使其顶部的div（倒数第二个）在调整大小或元素不合适时具有垂直滚动条。这是我的jsfiddle（https://jsfiddle.net/tgz98s6w/）的链接，在这里您可以看到倒数第二个div有时与最后一个div重叠，我想避免这种情况。 我尝试设置：
#windowsStoreBox {
position: absolute;
bottom: 0;
}
但是它似乎不起作用。 谢谢
/*
CSS File for Sharebox
*/
html,body {
margin: 0;
padding: 0;
background-color: #000000;
color: #FFFFFF;
overflow: hidden;
width:auto;
font: 15px "Segoe UI", "Tahoma";
border: 0.05em solid #535353;
cursor: default;
-webkit-user-select: none;
}
/* SCROLLBAR */
::-webkit-scrollbar {
width: 10px;
background-color: #747474;
opacity: 0.93;
}
::-webkit-scrollbar-track {
background: #171717;
}
::-webkit-scrollbar-thumb {
background: #454545;
}
::-webkit-scrollbar-thumb:hover {
background: #747474;
}
::-webkit-scrollbar-button:start {
height: 10px;
width: 10px;
background-color: #171717;
background-image: url('../buttons/angle_up.svg');
background-repeat: no-repeat;
background-size: 10px 6px;
background-position: center center;
border: none;
}
::-webkit-scrollbar-button:start:active {
background-color: #A2A2A2;
background-image: url('../buttons/angle_up_active.svg');
}
::-webkit-scrollbar-button:end {
height: 10px;
width: 10px;
background-color: #171717;
background-image: url('../buttons/angle_down.svg');
background-repeat: no-repeat;
background-size: 10px 6px;
background-position: center center;
border: none;
display: block;
}
::-webkit-scrollbar-button:end:active {
background-color: #A2A2A2;
background-image: url('../buttons/angle_down_active.svg');
}
/* END SCROLLBAR */
/* TITLEBAR */
.titlebar {
display: block;
position: relative;
height: 32px;
width: 100%;
overflow: hidden;
padding: 0;
-webkit-user-select: none;
cursor: context-menu;
background-color: #000000;
color: #CCCCCC;
}
.titlebar.titlebarLight {
background-color: #E6E6E6;
color: #2A2A2A;
}
.titlebarDarkBlur {
background-color: #3B3B3F;
}
.titlebarLightBlur {
background-color: #CCCCCC;
}
.titlebar.draggable {
-webkit-app-region: drag;
}
.titlebar-title {
float: left;
text-align: left;
font-size: 12px;
font-weight: light;
margin-left:36px;
margin-top:8px;
-webkit-user-select: none;
width: 70%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.titlebarTitleDarkBlur {
color: #CCCCCC;
}
.titlebarTitleLightBlur {
color: #838487;
}
.titlebar-controls {
float: right;
text-align: left;
}
.titlebar:after,
.titlebar-controls:after {
content: ' ';
display: table;
clear: both;
}
.titlebar-minimize,
.titlebar-resize,
.titlebar-close {
float: left;
width: 45px;
height: 31px;
margin: 1px 1px 0 0;
text-align: center;
line-height: 29px;
-webkit-transition: background-color .2s;
}
span.titlebar-icon {
font-family: "Segoe MDL2 Assets";
font-size: 10px;
color: #FFF;
}
span.titlebar-icon-light {
color: #000;
}
.titlebar.draggable .titlebar-close {
-webkit-app-region: no-drag;
}
.titlebar-close:hover {
background-color: rgba(232, 17, 35, 0.9);
}
/* END TITLEBAR */
/* SHAREBOX */
#shareBox {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 1em;
padding-top: 0em;
height: 60px;
max-height: 60px;
overflow: none;
}
#shareBox div {
padding-bottom: 0.3em;
}
#shareBoxText {
font-size: 1.05em;
/* font-weight normal is 400, and bold is 700, so we want something in between */
font-weight: 600;
}
#shareBoxFileName {
font-size: 0.87em;
}
#shareBoxSubText {
color: #A2A2A2;
font-size: 0.87em;
}
div.shareBoxSeparator {
padding-top: 0.25em;
padding-bottom: 0;
margin-bottom: 0;
}
.shareBoxSeparator.padded {
padding-left: 15px;
padding-right: 15px;
}
div.shareBoxSeparator hr {
height: 1px;
background-color: #A2A2A2;
border: none;
padding-bottom: 0;
margin-bottom: 0;
}
/* END SHAREBOX */
/* SERVICES BOX */
#servicesBox {
/* Add scrolling. The window will be of a fixed height */
position: fixed;
padding-top: 0.3em;
padding-bottom: 0;
overflow-y: auto;
overflow-x: none;
height: calc(100% - (32px + 60px + 33px));
max-height: calc(100% - (32px + 60px + 33px));
}
#servicesBoxSocial {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
/*flex-direction: row;*/
}
.shareService {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 66px;
height: 84px;
}
.shareServiceLogoBox {
background-color: #6A68D6;
width: 40px;
height: 40px;
margin-bottom: 0.25em;
/* Align logos to the center */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.shareServiceLogoImage {
width: 20px;
height: 20px;
}
.shareServiceDescription {
font-size: 0.825em;
}
.shareService:hover {
background-color: #2E2E2E;
}
/* END SERVICES BOX */
/* WINDOWS STORE BOX */
#windowsStoreBox {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 0.25em 0;
font-size: 0.81em;
border-bottom: 0.05em solid #535353;
height: 32px;
max-height: 32px;
overflow: none;
}
#windowsStoreBox:hover {
color: #A2A2A2;
}
#windowsStoreBox:hover g {
fill: #A2A2A2;
}
svg.windowsStoreLogo {
padding: 0 3px;
vertical-align: middle;
position: relative;
top: -2px;
}
/* END WINDOWS STORE BOX */<!DOCTYPE html>
<html>
<head>
<title>Share</title>
<link rel="stylesheet" href="static/css/sharebox.css">
</head>
<body >
<!-- TITLEBAR -->
<div id="titlebar" class="titlebar draggable">
<div id='titlebar-title' class="titlebar-title"></div>
<div id='titlebar-controls' class="titlebar-controls">
<div id='titlebar-close' class="titlebar-close" title='Close'>
<span class='titlebar-icon'></span>
</div>
</div>
</div>
<!-- END TITLEBAR -->
<!-- DESCRIPTION BOX -->
<div id='shareBox'>
<div id='shareBoxText'>Share</div>
<div id='shareBoxFileName' data-attr-filelocation='static/img/blank.svg'>tutankhamun.jpg</div>
<div id='shareBoxSubText'>This item will be shared.</div>
</div>
<!-- END DESCRIPTION BOX -->
<!--<div class='shareBoxSeparator padded'><hr /></div>-->
<!-- SERVICES BOX -->
<!-- This box allows you to share on facebook, twitter e.t.c -->
<div id='servicesBox'>
<!-- Add links to social media services and mail, onenote e.t.c -->
<div id='servicesBoxSocial'>
<!-- All services here -->
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/CopyFileLogo.svg' /></div>
<div class='shareServiceDescription'>Copy file</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/CopyLinkLogo.svg' /></div>
<div class='shareServiceDescription'>Copy link</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/MailLogo.svg' /></div>
<div class='shareServiceDescription'>Instagram</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/MailLogo.svg' /></div>
<div class='shareServiceDescription'>Mail</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/MailLogo.svg' /></div>
<div class='shareServiceDescription'>Feedback</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/OneNoteLogo.svg' /></div>
<div class='shareServiceDescription'>OneNote</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/MailLogo.svg' /></div>
<div class='shareServiceDescription'>Snip & Sketch</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/SkypeLogo.svg' /></div>
<div class='shareServiceDescription'>Skype</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/FacebookLogo.svg' /></div>
<div class='shareServiceDescription'>Facebook</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/TwitterLogo.svg' /></div>
<div class='shareServiceDescription'>Twitter</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/RedditLogo.svg' /></div>
<div class='shareServiceDescription'>Reddit</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/PinterestLogo.svg' /></div>
<div class='shareServiceDescription'>Pinterest</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/FacebookMessengerLogo.svg' /></div>
<div class='shareServiceDescription'>Messenger</div>
</div>
<div class='shareService'>
<div class='shareServiceLogoBox'><img class='shareServiceLogoImage' src='static/shareAppImages/WhatsAppLogo.svg' /></div>
<div class='shareServiceDescription'>WhatsApp</div>
</div>
</div>
</div>
<!-- END SERVICES BOX -->
<!--<div class='shareBoxSeparator' style='padding:0;'><hr /></div>-->
<!-- WINDOWS STORE BOX -->
<div id='windowsStoreBox'>
<p>
<svg class='windowsStoreLogo' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 210 210" width="18px" height="18px"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,210v-210h210v210z" fill="none"/><g fill="#ffffff"><g id="surface1"><path d="M90.36255,26.32691c-1.56372,0.10254 -3.15307,0.43579 -4.7168,0.94848l-13.125,4.35791c-8.02368,2.69165 -13.45825,10.25391 -13.45825,18.68774v21.58447l-26.25,3.69141v98.18116l118.125,16.53442l26.25,-8.66455v-113.15186l-26.25,-9.43359l-13.125,1.8457v-8.4082c0,-9.92066 -7.51098,-17.81616 -16.56006,-19.37988c-3.02491,-0.5127 -6.20362,-0.33325 -9.35669,0.71777l-3.74267,1.2561c-3.05054,-4.46045 -7.8186,-7.61352 -13.15063,-8.53638c-1.51245,-0.25634 -3.05054,-0.33325 -4.6399,-0.23071zM91.43921,39.375c3.76831,-0.35888 6.99829,2.48657 6.99829,6.5625v20.48218l-26.25,3.66577v-19.76441c0,-2.84546 1.7688,-5.3064 4.48609,-6.22925l13.125,-4.35791c0.56396,-0.20508 1.1023,-0.30762 1.64063,-0.35889zM117.68921,45.9375c3.76831,-0.33325 6.99829,2.48657 6.99829,6.5625v10.25391l-13.125,1.82007v-16.79077l4.48609,-1.48681c0.56396,-0.20508 1.1023,-0.30762 1.64063,-0.35889zM149.52759,72.49512l14.53491,5.22949v94.43848l-14.32984,4.7168l-103.79516,-14.53491v-75.31494zM124.6875,89.23462l-32.8125,4.61426v24.27612h32.8125zM85.3125,94.74609l-26.25,3.69141v19.6875h26.25zM59.0625,124.6875v19.6875l26.25,3.69141v-23.37891zM91.875,124.6875v24.27612l32.8125,4.61426v-28.89038z"/></g></g></g></svg>
Get apps in store
</p>
</div>
<!-- END WINDOWS STORE BOX -->
<!-- clearing div -->
<div id='styleRuleDiv' style='display:none;'></div>
<script src='static/js/sharebox.js'></script>
</body>
</html>
答案 0 :(得分：1)
我不确定是否被误解了，但您是因为您使用的是固定修订版和绝对修订版，所以它们不包含在常规文档流程中。
因此，您可以轻松限制#servicesBox的高度。以防止其接触底部。