请问，有人可以帮忙吗？无论窗口大小如何调整，我都需要将我的 RH 图像导航对齐到始终位于浏览器窗口的底部。
我创建了一个父 .container（最大宽度 800 像素）的流体布局，其中包含 3 个 div：
- 顶部的顶部桅杆 - 顶部
桅杆下方的两个并排列 div (66:33)
- LH：主体是左对齐的列，
- RH：导航是右对齐列——我需要底部对齐
最后是一个页脚 div（在主容器之外，跨越整个浏览器宽度）。
我的问题是导航元素（4 个叠加在一起的翻转图像）永远不会与浏览器的底部对齐，而是保持在 div 的顶部。
我尝试了以下 CSS 都无济于事：
vertical-align:0 bottom:0 padding-bottom:0 margin-bottom:0
我更喜欢 CSS 解决方案，它也不需要为 div 指定固定高度. 请问有人可以帮忙吗？我已经为解决方案搜寻了数周:(
由于我是新手，我无法在此处发布我所拥有的图像，所以我将尝试在下面绘制它。但这里还有一个指向我网站的屏幕截图的链接，目前使用以下代码：
http://hooboo.co.uk/Screengrab.jpg
画出来，我有的是：
-----800px container span-------------------------
+----topmast-------------------------------------+
+----2/3 width------------+ +----1/3 width-------+
| mainbody | | navigation (4-row)|
| that | | that is short |
| is | +--------------------+
| tall |
| |
+-------------------------+
--------------------------------------------------
+--------footer 100% browser width-----------------------+
我需要的是：
-----800px container span-------------------------
+----topmast-------------------------------------+
+----2/3 width------------+
| mainbody |
| that |
| is | +----1/3 width-------+
| tall | | navigation (4-row)|
| | | that is short |
+-------------------------+ +--------------------+
--------------------------------------------------
+--------footer 100% browser width-----------------------+
这是我的CSS：
.container {
width: 84%;
height: 100%;
max-width: 800px;
padding-left: 3%;
padding-right: 3%;
padding-top: 6%;
padding-bottom: 0%;
margin-bottom: 0%;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}
#topmast{
clear: both;
margin-left: 0;
margin-top: 25%;
height: auto;
width: 100%;
min-width: 240px;
min-height: auto;
display:block;
}
#navigation{
clear: right;
float:right;
width:33.125%;
height:600px;
height:auto;
max-width:265px;
vertical-align:bottom;
bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
position:relative;
display:block;
}
#mainbody {
clear: left;
margin-right:33.125%;
margin-top: 0%;
width: 65%;
display:block;
}
#footer {
clear:both;
background-color:#333;
height:100px;
}
这是我的两列的html：
<div id="navigation" align="right" style="vertical-align:bottom">
<a href="mailto:email@url.com" target="_blank"
onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Email','','00_assets/buttons/00_BUTTONS_EMAILO.png',1)">
<img src="00_assets/buttons/00_BUTTONS_EMAIL.png" alt="Email: email@url.com"
width="100%" height="auto" id="Email" border="0" style="float: right;"/>
</a>
<a href="tel:+1234567890" target="_blank"
onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Call','','00_assets/buttons/00_BUTTONS_CALLO.png',1)">
<img src="00_assets/buttons/00_BUTTONS_CALL.png" alt="Call: +1234567890"
width="100%" height="auto" id="Call" border="0" style="float: right;"/>
</a>
<a href="https://url.com/screenname" target="_blank"
onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Twitter','','00_assets/buttons/00_BUTTONS_TWEETO.png',1)">
<img src="00_assets/buttons/00_BUTTONS_TWEET.png" alt="Tweet us"
width="100%" height="auto" id="Twitter" border=0 style="float: right;"/>
</a>
</div>
<div id="mainbody" align="left">
<h1>Welcome to website</h1>
<p class="Body"> Mainbody copy about website services goes here.</p>
</div>
请问有人可以帮忙吗？我不知道如何使用 JsFiddle 来发布演示。对网页设计来说还是有点新意。提前谢谢你。