适合任何屏幕的菜单（自动调整宽度）答案

【问题标题】：Menu that fits any screen (auto resize width)适合任何屏幕的菜单（自动调整宽度）
【发布时间】：2012-02-26 11:26:20
【问题描述】：

我正在制作一个完全适合任何屏幕的菜单，但它的高度不会改变（只有它的宽度）。

问题是：我的菜单分为 3 个图像（左、中和右）。中间图像调整大小以适应屏幕（我放了 70%），但是当屏幕宽度较小时，菜单的两侧会出现断线，如下所示：

我需要解决这个问题，或者其他方法来制作这个菜单！

它必须占据整个宽度并在其两侧具有渐变。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
var onre = function(){
    var w = document.getElementById('make2fit').offsetWidth;
    var h = document.getElementById('make2fit').offsetHeight;
    var ww = window.innerWidth;
    var wh = window.innerHeight;
    var p = (Math.floor((ww/wh)*100)/100<1)?(ww/w):(wh/h);
    var nw = Math.round(w * p);
    var nh =  Math.round(h * p);
    document.getElementById("make2fit").width = nw;
    document.getElementById("make2fit").height = nh;    
}

window.onresize = onre;
window.onload = onre;
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Silvania Miranda</title>
<style type="text/css">
body {
    background-color: #030708;
}
div.menu {
    /* current css */
    min-width:960px; /* which is the current minimum width for designing website for desktops */
    height:auto;
    width:auto;
    margin-right:auto;
    margin-left:auto;
    position:relative;
    top:510px;
    overflow:hidden;
    
}
ul li {
    /* current css */
    display:block; /* default display for list elements, could be omitted */
    float:left;
    width:30%;
    max-width:125px;
    min-width:50px;
    color:white;
}
ul {
    /* current css */
    overflow:hidden
}
div.mulher{
width:auto;
height:auto;
z-index:-1;
bottom:0px;
right:0px;
position:absolute;
}

div.fundo{
    position:absolute;
    width:100%;
    height:auto;
    bottom:15%;
    }

div.fundomenu{
    background:url(menufundo.png);
    width:80%;
    height:60px;
    position:relative;
    margin-right:auto;
    margin-left:auto;
    z-index:0;
    float:left}
    
div.cantomenu
{position:relative;
height:60px;
width:156px;
overflow:hidden;
z-index:100;
float:left}
div.esq{background:url(menupontae.png)}
div.dir{background:url(menupontad.png)}

</style>
</head>

<body>
<div class="mulher"><img src="mulher.png" id="make2fit" style="margin:0px;"/></div>
<div class="fundo">

<div class="esq cantomenu"></div>
<div class="fundomenu"></div>
<div class="dir cantomenu"></div>

</div>
</body>
</html>

【问题讨论】：

你能发布html和css吗？如果可以，请使用 jsfiddle。

标签： html resize width screen

【解决方案1】：

这里真正安全的选择是使用 1 行 3 列的表格。这将为您提供所需的列（左、右、中），并且将保持宽度。关于列的背景图像，您可能需要考虑如何设计和剪切它们以使其看起来更好。

这里的另一个选项是 html css 和 javascript 的组合 - 唯一的问题是如果浏览器不支持 JS，您的网站看起来不正确。

这有帮助吗？

【讨论】：

你能一步一步教我吗？由于我在 html 方面没有太多技能，所以我不知道我应该如何在表格中做到这一点。