Question

我正在尝试对我的网站进行动态布局，但我在菜单和常规内容方面遇到了问题。当我在1920x1080时，边距和位置仍然很好，但是当我减小这个尺寸时，一般内容会超出固定菜单。

如何在侧边栏（菜单和徽标所在位置）和一般内容之间应用此边距？

 <div id="header">
                <div id="logo">
                    <a href="#">aaaaaaaaa</a>
                </div><!--logo-->

            <div id="center">
                <div id="wrap">
                    <ul id="">
                        <li><a href="#inicio">In&iacute;cio</a></li>
                        <li><a href="#portifolio">Potifólio</a></li>
                        <li><a href="#clientes">Clientes</a></li>
                        <li><a href="#sobre">Sobre</a></li>
                        <li><a href="#contato">Contato</a></li>
                    </ul>
                </div>
            </div><!--menu-->
        </div><!--header-->

        <div id="content">
                <div id="inicio">
                    inicio
                </div>

                <div id="contato" style="background-color:blue">
                    contato
                </div>
       </div>

        </div><!--box-->

的CSS：

*{margin:0;padding: 0;}
body{
  background-color:#fffbe7;
  overflow:hidden;
}

html, body, #center {
    height: 100%;
    position:relative;
    margin:0px;
    padding:0px;
}
#header{
  position: fixed;
}
#center #wrap {
    height: 50%;
    left: 1%;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 50%;
}
#center ul{
  list-style: none;
  padding:0;
  margin:0;
  border-right:1px solid #000;
  padding-right: 20px;
}
#center ul li a{
  color:#333;
  text-decoration: none;
  font-family: Georgia;
  font-size: 30px;
}
#center ul li a:hover{
  text-decoration: underline;
}

#header{
  width:20%;

}


#content{
    position: absolute;
    top: 0%;
    width:80%;
    margin-left:10%;

}
#content div{
  height: 400px;
  background: red;

}

您可以在此处查看代码和演示：
http://jsfiddle.net/7eAJg/1/

Answer 1

尝试删除内容div上的位置：绝对值，因为绝对位置来自窗口的左侧，因为您的边距是％，它们不相同。让他们按照自己的意愿堆叠，不要强迫绝对。

Answer 2

媒体查询将帮助您为不同尺寸的浏览器提供和更改样式。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

动态布局的问题

2 个答案: