0

我正在重新设计我拥有的启动页面。目前我已经能够让我的页脚 div 沿着页面底部运行并通过固定位置居中,我将其用作菜单。但是,我遇到的唯一问题是,由于此页脚/菜单 div 具有透明背景,如果其上方的内容 div 包含的信息超出页面的容量,则文本显示在页脚/菜单 div 下方,使菜单不可读。有什么办法可以让内容 div 的高度只运行到这个固定页脚/菜单的顶部,所以内容中的文本不会在下面运行?

我的CSS设置如下:

/*Global Settings*/
@import url(http://fonts.googleapis.com/css?family=Istok+Web);

* { margin: 0; outline: medium none; padding: 0; }

body { font: .9em 'Istok Web',sans-serif; background: url('../images/iQwallpaper.jpg') center center no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

/*DIVS*/
div.header-outer { max-width: 100%; margin: 20px 20px 20px 20px; }

div.menu-outer { width: 100%; background: rgba(255,255,255,0.2); position: fixed; bottom: 0px; }

div.dashboard { max-width: 100%; max-height: 80%; overflow: auto; margin: 0 auto; }

div.left { float: left; }

div.right { float: right; }


/*MENU*/
#centeredmenu { float:left; width:100%; overflow:hidden; position:relative; }

#centeredmenu ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; }

#centeredmenu ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; }

#centeredmenu ul li a { display:block; margin:0; padding: 20px; color:#FFFFFF; text-decoration:none; }

#centeredmenu ul li a:hover { background:#369; color:#fff; }

#centeredmenu ul li a.dashboard { background: rgba(255,51,51,0.3); }

#centeredmenu ul li a.dashboard:hover { background: rgba(255,51,51,0.6); }


img.icon { height: 200px; display: inline; margin: 25px 50px 25px 50px; }

.white { color: #f2f2f2; }

标签中的HTML如下:

<div class="header-outer">
<div class="left">
<h2 class="white">iQlaunch</h2>
</div>
<div class="right">
<p class="white">v 14.0.0 alpha</p>
</div>
<div class="clear"></div>
</div>

<div class="dashboard">
<p class="white">a bunch of text to get it to fill the page</p>
</div>

<div class="menu-outer">
<div id="centeredmenu">
<ul>
<li><a href="#" class="dashboard">Dashboard</a></li>
<li><a href="#">Customer Sites</a></li>
<li><a href="#">Support Tools</a></li>
<li><a href="#">Important Numbers</a></li>
<li><a href="#">Helpfiles for Everyone</a></li>
<li><a href="#">Helpfiles for Support</a></li>
<li><a href="#">Internal Sites</a></li>
<li><a href="#">Scheduling</a></li>
<li><a href="#">Staff Phone Directory</a></li>
<li><a href="#">Training Presentations</a></li>
<li><a href="#">Mobile News Sites</a></li>
</ul>
</div>
</div>

有任何想法吗?

4

2 回答 2

0

哪个部分有你所有的内容?我建议将“溢出”CSS 设置更改为hiddenor scroll

http://www.w3schools.com/cssref/pr_pos_overflow.asp

于 2013-09-25T01:46:48.563 回答
0

我实际上想出了如何做我想做的事。我最终创建了两个父 div:

div.menu-outer { width: 100%; display:block; position: fixed; bottom: 0px; background: url('../images/iQwallpaper.jpg') center center no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; /*background: rgba(255,255,255,0.2);*/ }

div.menu-inner { background: rgba(255,255,255,0.2); }

第一个父 div 使用与 body 相同的背景设置,然后第一个内部的第二个父 div 应用透明颜色。这使它看起来从身体上看是透明的,但实际上并非如此。:)

于 2013-11-13T21:58:52.443 回答