html - 需要帮助将 div 放在彼此的顶部并将最后一个放在底部

Question

我正在尝试构建一个页面，我希望最后一个 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'>&#xE8BB;</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>

Answer 1

我不确定我是否误解了，但是你因为你正在使用 fix 和 absolute 它们被排除在正常的文档流之外。

因此您可以轻松地限制#servicesBox 的高度。以防止它接触底部。

参见 fiddle :https://jsfiddle.net/16sn87pa/