修复了网页顶部的菜单会随着窗口调整大小而改变大小

Posted 2023-02-16

技术标签:

【中文标题】修复了网页顶部的菜单会随着窗口调整大小而改变大小【英文标题】：Fixed Menu at the Top of Webpage that Changes Size as Window Resizes 【发布时间】：2015-08-31 06:46:50 【问题描述】：

我需要的是顶部的固定菜单，下方的 Flash 文件，然后是一些文本。

这是我目前所拥有的： http://jsfiddle.net/ovr8spfu/

<style  type="text/css">
#menu 
    background-color:blue;
    height:70px;
    width:100%;
    top:0px;
    left:0px;
    position:fixed;

#container 
    background-color:green;
    height:70px;
    width:1310px;
    margin-left:auto;
    margin-right:auto;
    border-right-width:1px;
    border-right-color:black;
    border-right-style:solid;

#logo 
    height:70px;
    width:144px;
    float:left;
    background-color:aqua;

.menu_item 
    background-color:red;
    height:70px;
    font-family:Helvetica;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    border-left-width:1px;
    border-left-color:black;
    border-left-style:solid;
    float:right;

.menu_item.test1 width:80px;
.menu_item.test2 width:188px;
.menu_item.test3 width:122px;
.menu_item.test4 width:136px;
.menu_item.test5 width:72px;
.menu_item.test6 width:116px;
.menu_item:hover background-color:pink;
a:link color:#FFFFFF;text-decoration:none;
a:visited color:#FFFFFF;text-decoration:none;
a:active color:#FFFFFF;text-decoration:none;
#filler 
    height:62px;
    width:700px;

#flash 
    height:500px;
    width:1300px;
    margin-left:auto;
    margin-right:auto;

#section 
    width:900px;
    height:480px;
    margin-left:auto;
    margin-right:auto;
    font-family:Helvetica;
    font-size:18px;

</style>
</head>

<body>
<div id="menu">
    <div id="container">
    <div id="logo"></div>
    <a href="#"><div class="menu_item test1">ABC 123</div></a>
    <a href="#"><div class="menu_item test2">TESTING 8637376436</div></a>
    <a href="#"><div class="menu_item test3">Blah Blah Blah</div></a>
    <a href="#"><div class="menu_item test4">HEEEEEEELP</div></a>
    <a href="#"><div class="menu_item test5">XYZ123</div></a>
    <a href="#"><div class="menu_item test6">HOME</div></a>
</div>

我有几个问题，我已经搜索了几个小时，但我自己无法解决。

青色部分是我的徽标，应该始终位于左上角，绿色部分是“填充”，我的红色菜单项应该固定在右上角。

因为我的菜单/容器是水平的1310px，如果要最小化窗口，我的红色菜单项会在屏幕外消失。我该怎么做才能在窗口最小化时将红色菜单项推到左侧而“绿色填充部分”消失？

我的 Flash 文件将放置在菜单下方，水平方向也是 1300px。如果要调整浏览器窗口的大小，如何使其自动调整大小，使其水平变得越来越小？

如何使红色菜单项内的文本在垂直和水平方向居中？

如何将#section 文本置于页面中间？

【问题讨论】：

删除了帮助，更新了标签并感谢，因为它们不是必需的，并改进了格式。当您下次提出多个问题时，请提出不同的问题。 【参考方案1】：

问题 1&2

如果您将容器和 Flash 文件的宽度设置为 100%，它会在页面重新调整大小时自动为您缩小。

width:100%;

问题 3 和 4

这是一个 JSfiddle，展示了如何根据父 div 大小水平和垂直居中，您可以将此类添加到任何内容，它将根据父 div 大小居中 -http://jsfiddle.net/ovr8spfu/2/

.center 
    text-align:center;
    position:relative;
    top:50%;

【讨论】：

感谢您的建议，请查看我的后续问题。【参考方案2】：

我会尽力回答其中的一些问题，但其中很多是您需要学习如何使用百分比，并可能阅读更多有关媒体查询如何工作的信息。以http://learnlayout.com/media-queries.html 为例。

这里你的容器需要设置为width:100%;。这意味着它将始终锁定到浏览器宽度的大小。你会遇到的问题是当屏幕变小时，你的其他项目会被推到一起。

我对 flash 在浏览器中的工作原理不是很熟悉，因为我已经忘记了很多，但同样，如果你将它设置为它所在容器的 100% 宽度，它应该始终填写为那个尺寸。您可以通过将当前的 Flash 代码修改为以下内容来做到这一点：

<div id="flash"><embed src="my_flash.swf" height="100%" width="100%" menu="false"></div>

这将强制它达到它所在容器的最大高度和宽度。

.menu-item

text-align: center;

在这里，您可以使用您已经在小提琴中完成的技巧：margin: 0 auto; in #section，而不是 margin-left: auto; 和 margin-right: auto;。使用margin: 0 auto; 只是意味着您可以编写更少的代码。

希望这会有所帮助。

【讨论】：

感谢您的建议，请查看我的后续问题。【参考方案3】：

检查这个小提琴https://jsfiddle.net/ovr8spfu/3/

#menu 
background-color:blue;
height:70px;
width:100%;
top:0px;
left:0px;
position:fixed;
overflow: hidden;

#container 
    background-color:green;
    height:70px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    border-right-width:1px;
    border-right-color:black;
    border-right-style:solid;

#logo 
    height:70px;
    width:144px;
    float:left;
    background-color:aqua;

.menu_item 
    padding: 25px 5px;
    background-color:red;
    height:70px;
    font-family:Helvetica;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    border-left-width:1px;
    border-left-color:black;
    border-left-style:solid;
    float:right;

.menu_item:hover 
    background-color:pink;

a:link 
    color:#FFFFFF;
    text-decoration:none;

a:visited 
    color:#FFFFFF;
    text-decoration:none;

a:active 
    color:#FFFFFF;
    text-decoration:none;

#filler 
    height:62px;
    width:100%;

#flash 
    height:500px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    background-color: #000;

#section 
    width:100%;
    height:480px;
    margin-left:auto;
    margin-right:auto;
    font-family:Helvetica;
    font-size:18px;
    text-align:center;

如果您想设计响应式网站，请尽量避免使用固定宽度。

我将您的#container 和#flash 宽度更改为100%

我删除了您的 test-1、test-2 等... div 会根据您的内容自动调整大小，因此不需要固定宽度。

为了使菜单链接的文本（以及您的部分的文本）水平居中，我使用了 text-align:center 。为了垂直对齐，我刚刚添加了以下填充：