Question

所以我一直在努力研究我的网站创作技巧，并正在阅读有关html / css开发的各种教程。我现在遇到的问题是，当我改变页面的大小时，视图会被极大地改变。我假设当视图改变时它将保持其结构但具有较小的视图窗口（不是这种情况）。

问题在于我使用百分比值而不是像素吗？有没有更好的方法来构建我的设计，使其响应窗口大小的变化？

这是我的HTML

<html>
<html lang="en">

<head>
<title> MyWebsite</title>
<link rel="stylesheet"type="text/css" href="style.css">
</head>
<body>

<div id="containerColumn1">
    <div id="Fill1"> </div>
</div>

<div id="containerTopLogo">
    <div id="FillTopLogo"> </div>
</div>

<div class="menu-wrap">
 <nav class="menu">
  <ul class="clearfix">
   <li><a href="#">Home</a></li>

    <li>
        <a href="#">Services <span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
            <li><a href="#"> Option 1</a></li>
            <li><a href="#"> Option 2</a></li>
            <li><a href="#"> Option 3</a></li>
            </ul>
        </li>  

    <li>
        <a href="#"> Services2 <span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
            <li><a href="#"> Option 1</a></li>
            <li><a href="#"> Option 2</a></li>
            <li><a href="#"> Option 3</a></li>
            </ul>
        </li>

    <li><a href="#"> Contact Us</a></li>
        <li><a href="3"> Site Map</a></li>
        </ul>
  </nav>
 </div> 

<div id="containerPicture"> 

    <div id="headerPicture"> </div>
</div>

<div id="container"> 
    <div id="header"> </div>
</div>  

<div id="containerColumn2">
    <div id="Fill2"> </div>
</div>
</body>
</html>

这是我的style.css

body {
    background: #FFFFFF url('body-bg.jpg');
}

.clearfix:after {
    display:block;
    clear:both;
}


/*COLUMNS TO CENTER PAGE*/

#containerColumn1 {
    width:18.2%;
    margin-top: 0%;
    margin-left: 0%;
    padding: 0;
    border: 5px groove #000;
}

#Fill1 {
    background: red;
    height:100%;
}

#containerTopLogo {
    width:61.3%;
    margin-left:18.4%;
    margin-top:-47.4%;
    height:23%;
    position: absolute;
    border: 5px groove #000;

}

#FillTopLogo {
    background: green;
    height:100%;
}

#containerColumn2 {
    width:18%;
    margin-top: -49.82%;
    margin-left: 80%;
    height:100%;
    position:absolute;
    padding: 0;
    border: 5px groove #000;
}

#Fill2 {
    background: red;
    height:100%;
}


/*Menu Outline*/


.menu-wrap {
    width:50%;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
    background:#000000;
}

/* Height of menu (Home)(*MARGIN*) AND LEFT-RIGHT PLACEMENT(*WIDTH*)*/
.menu {
    width: 61.5%;
    margin:0%;
    position: absolute;
    left:19%;
    top: 25%;
    border-style: groove;
    border-width: 5px;
    border-color: #000000;

}

.menu li{
    margin:0px;
    list-style:none;
    font-family:'Ek Mukta';
}

.menu a {
    transition:all linear 0.15s;
    color:#000000;
}

.menu li a:hover > a .menu .current-item a{
    color:#FFF000;
}


.menu .arrow {
    font-size:11px;
    line-height:0%;
}


/* Top of the Page */

.menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size:19px;
}

/* Menu Item spacing (Vertical/Horizontal) */
.menu > ul > li > a  {
    /* Menu Spacing Vert/Hor */
    padding:10px 30px;
    display:inline-block;
    text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a{
    background:#FFFFFF;
}



/* Bottom Level */

.menu li:hover .sub-menu  {
    z-index:1;
    opacity:1;
}


.sub-menu {
    width:100%;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
    background:#FFFFFF;
    border-style: groove;
    border-width: 5px;
    border-color: #000000;
}

.sub-menu li  {
    display:block;
    font-size:16px;
}

.sub-menu li a {
    padding:10px 30px;
    display:block;
}

.sub-menu li a:hover, .sub-menu .current-item a{
    background:#FFFFFF;
}

/*END OF MENU TOOLBAR*/

#containerPicture {
    width:62%;
    margin-top: -31.7%;
    margin-left: 18.6%;
    padding: 0;
    border: 5px groove #000;
}

#headerPicture {
    background: yellow;
    height:20%;
}

#container {
    width: 62%;
    margin-top:-0.5%;
    margin-left: 18.6%;
    padding: 0;
    border: 5px groove #000;
}

#header {
    background: blue;
    height: 50%;
}

我想说我使用了Seb Kay提供的下拉菜单。他的网站：http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css。我只是将此作为参考，以至于他至少得到了他的工艺认可。

Answer 1

您的问题来自您的CSS中的垂直边距和填充规则。这有点违反直觉，但是这个规则，当用百分比定义时，不以高度作为参考，而是以宽度作为参考，因此所有4个边距都相等。例：如果你有：margin：5％，则上边距和左边距相同，它们不依赖于顶部和底部边距的上下文的高度以及右边和左边的with。对于填充，它是相同的。

所以，我的解决方案：如果你真的不需要百分比布局，我建议你使用ems作为垂直边距和填充。否则，如果你需要保持比例，你可以使用vh单位。 vh单位就像一个百分比，它不是指父级的高度，而是指窗口的高度，所以当你想要避免滚动时，在页面上保留比例是很好的并保持百分比。

网站格式化问题

1 个答案: