html和css响应式设计没有按照我想要的方式调整div

Question

我正在创建一个仅使用HTML和CSS的网站。我的网站目前看起来像this。忽略破碎的文本，因为它们不是我的问题。

标题和导航栏（垂直排列的颜色块）是固定位置，我命名为.content的最右边的div是可滚动的。

问题在于，每当我尝试调整网站大小以使其变小时，div就会变得不合适，而不是我想要的方式。调整大小后看起来像this。避免破碎的话，他们不是问题。问题是导航栏（我命名为.nav）没有坚持标题div（我将其命名为.header）。

这是我的HTML代码：

/* entire website */

    body
    {
	    background: #E3AB42;
	    margin-top: 0px; 
	    margin-left: 0px;
    }

    /* box sizing */
    * {
       box-sizing: border-box;
    }

    /* all about the header */

    .header {
	    background-color: #060606; /*666!!!!*/
	    height: 100%;
	    position: fixed;
    }

    .header img {
	    margin-left: 25px;
	    margin-top: 20px;
    }

    .header p {
	    transform: rotate(270deg);
	    color: white;
	    font-family:  Optima, "Times New Roman", Georgia, Serif;
    }

    .header .title {
	    margin-top: 220px;
	    margin-left: -150px;
	    display: inline-block;
	    font-size: 88px;
    }

    .header .subtext {
	    display: inline-block;
	    text-align: right;
	    margin-top: -300px;
	    margin-right: -55px;
	    font-size: 33px;
	    white-space: nowrap;
    }

    /* navigation general codes */

    .nav {
	    position: fixed;
	    height: 100%;
	    margin-left: 225px;
    }

    .nav div {
	    height: 20%;
	    padding: 0;
    }

    .nav p {
	    color: white;
	    font-family:  Optima, "Times New Roman", Georgia, Serif;
	    font-size: 33px;
	    transform: rotate(270deg);
	    text-align: center;
	    display: inline-block;
    }

    a:link {
	    text-decoration: none;
    }

    /* navigation vertical texts 

    #verticalnewbie {
	    margin-top: 73px;
    }

    #verticalskill {
	    margin-top: 65px;
    }

    #verticalheroes {
	    margin-top: 78px;
    }

    #verticalmindset {
	    margin-top: 85px;
    }

    #verticalteam {
	    margin-top: 59px;
    }

    /* navigation button colours */

    .newbie {
    	background: #E3AB42;
    }

    .skills {
	    background: #FAA02E;
    }

    .heroes{
    	background: #B17C3B;
    }

    .mindset {
    	background: #584F4A;
    }

    .team {
    	background: #2F2526;
    }

    /* general content */

    .content { 
    	width: 70%;
    	height: auto;
    }
    
    /* .content #examplar {
    	float: right;
	    height: auto;
    	width: 25%;
    }

    /* page colours */

    body#pagenewbie {
    	background: #E3AB42;
    }

    body#pageskill {
    	background: #FAA02E;
    }

    body#pageheroes {
    	background: #B17C3B;
    }

    body#pagemindset {
    	background: #584F4A;
    }

    body#pageteams {
    	background: #2F2526;
    }

    /* content texts */

    .content h1 {
	    text-align: center;
	    color: white;
	    font-family: Optima, "Times New Roman", Georgia, Serif;
	    font-size: 66px;
    }

    .content li {
	    color: white;
	    font-family: Optima, "Times New Roman", Georgia, Serif;
	    font-size: 33px;
	    font-weight: bold;
	    list-style-type: none;
    }

    .content p {
    	list-style-type: none;
	    text-decoration: none;
	    color: white;
	    font-family:  Optima, "Times New Roman", Georgia, Serif;
	    font-size: 22px;
    }

    /* hover */

    #dropdown:hover span {
	    display: block;
        font-size: 13px;
        height: auto;
        width: 200px;
        color: white;
        letter-spacing: 1px;
        text-align: left;
        padding: 5px 20px;
	    position: absolute;
	    margin-top: -40px;
	    margin-left: 880px;
    	font-family:  Optima, "Times New Roman", Georgia, Serif;
    }

    body#pagenewbie #dropdown:hover span {
        background: #E6B355;
        border: 5px solid #C19138;
    }

    body#pageskill #dropdown:hover span {
	    background: #FAAA43;
	    border: 5px solid #D48827;
    }

    body#pageheroes #dropdown:hover span {
	    background: #B9894F;
	    border: 5px solid #966932;
    }

    body#pagemindset #dropdown:hover span {
	    background: #69615C;
	    border: 5px solid #4B433F;
    }

    body#pageteams #dropdown:hover span {
    	background: #443B3C;
    	border: 5px solid #281F20;
    }

    #dropdown {
	    color: #E6E6E6;
    }

    #infoone {
	    display: none;
    }

    /* grid boxes */

    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    
    [class*="col-"] {
        float: right;
    }

<!DOCTYPE html>
    <html>
	    <head>
		    <title>Overtips</title>
		    <link rel="stylesheet" type="text/css" href="theme.css" />
		    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    </head>
	
	    <body id="pagenewbie">
		
		    <div class="row">
  			    <div class="col-1"></div>
  			    <div class="col-2"></div>
  			    <div class="col-3"></div> <!-- 25% -->
  			    <div class="col-4"></div>
  			    <div class="col-5"></div>
  			    <div class="col-6"></div>
  			    <div class="col-7"></div>
  			    <div class="col-8"></div>
  			    <div class="col-9"></div> <!-- 75% -->
  			    <div class="col-10"></div>
  			    <div class="col-11"></div>
  			    <div class="col-12"></div>
	    </div>

		<div class="container">
		
			<div class="col-2 header">
				<div class="logo"><img src="overlogo.png"></div>
				<div class="title"><p>OVERTIPS</p></div>
				<div class="subtext"><p>Mainly for beginner and<br>intermediate players</p></div>
			</div>
			
			
			<div class="col-1 nav">
			
				<a href="file:///Users/marvin.chong021/Desktop/Website/index.html"><div class="newbie"><p id="verticalnewbie">NOVICE</p></div></a> 
				
				<a href="file:///Users/marvin.chong021/Desktop/Website/overskill.html"> <div class="skills"><p id="verticalskill">SKILLS</p></div></a>
				
				<a href="file:///Users/marvin.chong021/Desktop/Website/overheroes.html"> <div class="heroes"><p id="verticalheroes">HEROES</p></div></a>
				
				<a href="file:///Users/marvin.chong021/Desktop/Website/overmindset.html"> <div class="mindset"><p id="verticalmindset">MINDSET</p></div></a> 
				
				<a href="file:///Users/marvin.chong021/Desktop/Website/overteams.html"> <div class="team"><p id="verticalteam">TEAM</p></div></a>
				
			</div>
			
			<div class="col-9 content">
			
				<h1>Novice Section</h1>
				<li>In-game settings</li>
				<p>Firstly, in <a id="dropdown">game settings<span id="infoone">It is a menu with options to change.</span></a>. Like any other game, you want to check your in game setting before playing the game. Everyone is different and different people prefer different settings. You may need to experiment with your heroes (characters you can play) and play around a little and see what you need to change. Assuming you know what you need to change, you can go to options menu by pressing escape or going to game menu screen and change the setting you want. </p>
			</div>
		</div>
	</body>
</html>

我怀疑它与它有关     [class * =“col-”] {         漂浮：对;     } 我尝试将其更改为左侧，除了向左移动的.content之外，问题仍然存在。

Answer 1

问题是您已将.nav元素设为fixed margin-left: 225px;，但在第二张图片中，.header显然更小！

至少应该设置

.header {
   width: 225px;
}

否则您应该调整.nav margin-left以匹配.header的宽度

Answer 2

将网格框的样式移到正文后面。像这样

body
{
    background: #E3AB42;
    margin-top: 0px;
    margin-left: 0px;
}

/* grid boxes */

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: right;
}

然后将固定宽度放到标题中：

.header {
    background-color: #060606;
    height: 100%;
    width:225px;
    position: fixed;
}

如果你不在标题样式之前移动网格框样式，那么它们会覆盖这个样式。所以不要忘记第一步。