Fatal编程技术网
  • html/
  • Html 浏览器调整大小时不重叠但堆叠div

Html 浏览器调整大小时不重叠但堆叠div

html css

Html 浏览器调整大小时不重叠但堆叠div,html,css,overlapping,Html,Css,Overlapping,4个div应相互堆叠，且不应重叠 头部应该像4.5英尺宽100% 菜单应堆叠为1.Head和4.Footer 内容应在页面中居中，并在浏览器上重新调整3的大小。内容应与其他div堆叠，不得重叠 这里有一个链接，指向显示问题的图片： 这里有一个链接，它应该是什么： #头{ 高度：100px； 宽度：100%； 背景色：#33ff33； 排名：0； 左：0； 右：0； 位置：固定； 边框：1px#000实心； } #菜单{ 身高：100%； 宽度：150px； 背景色：#ccff00； 左

4个div应相互堆叠，且不应重叠

  • 头部应该像4.5英尺宽100%
  • 菜单应堆叠为1.Head和4.Footer
  • 内容应在页面中居中，并在浏览器上重新调整3的大小。内容应与其他div堆叠，不得重叠
    • 这里有一个链接，指向显示问题的图片：

    这里有一个链接，它应该是什么：

    
#头{
高度：100px；
宽度：100%；
背景色：#33ff33；
排名：0；
左：0；
右：0；
位置：固定；
边框：1px#000实心；
}
#菜单{
身高：100%；
宽度：150px；
背景色：#ccff00；
左：0；
排名：0；
位置：固定；
边框：1px#000实心；
}
#内容{
背景：rgba（2252252250.5）；
边框：1px#000实心；
高度：600px；
宽度：800px；
左边距：-400px；
利润上限：-300px；
左：50%；
最高：50%；
位置：固定；
}
#页脚{
高度：35px；
宽度：100%；
背景色：#ff3300；
底部：0；
左：0；
右：0；
位置：固定；
边框：1px#000实心；
}

    1。头
    

    2。菜单
    

    3。内容
    

    4。页脚

    您好，请查看此链接中的代码

    请告诉我有关这方面的任何问题或建议。

    您能将图片与所需的正确可视化链接起来吗？这里的链接：谢谢您，我会尝试的！到目前为止，这似乎是解决办法：） 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">

        #headr{                
            height: 100px;
            width: 100%;
            background-color: #33ff33;
            top: 0;
            left: 0;
            right: 0;
            position: fixed;
            border: 1px #000 solid;
        }

        #menu{
            height: 100%;
            width: 150px;
            background-color: #ccff00;
            left: 0;
            top: 0;
            position: fixed;
            border: 1px #000 solid;

        }
        #content{

            background: rgba(225, 225, 225, 0.5);
            border: 1px #000 solid;
            height: 600px;
            width: 800px;
            margin-left: -400px;
            margin-top: -300px;
            left: 50%;
            top: 50%;
            position: fixed;



        }
        #footer{
            height: 35px;
            width: 100%;
            background-color: #ff3300;
            bottom: 0;
            left: 0;
            right: 0;
            position: fixed;
            border: 1px #000 solid;

        }

    </style>


</head>
<body>
    <div id="headr"><p style="text-align: center;"> 1. Head</p></div>
    <div id="menu"><p style="text-align: center;"> 2. Menu</p></div>
    <div id="content"><p style="text-align: center;"> 3. Content</p></div>
     <div id="footer"><p style="text-align: center;"> 4. Footer</p></div>


</body>

    It's an option using display:table and table-cell to fit on the window.