Question

正如您在第一张图片中看到的那样，当浏览器最小化时，边框会被切断。第二张图片是所有屏幕尺寸的外观。我的一些页面出现了这个问题，并且花时间试图解决这个问题，但没有运气。任何帮助赞赏！如果您需要更多代码段，请告诉我们。我附上了jsfiddle，但它真的很混乱，可能很难看出问题是什么。如果您调整浏览器的大小，全屏版本会更容易一些。

https://jsfiddle.net/w95n3x0L/

https://jsfiddle.net/w95n3x0L/embedded/result/

  <body>
   <div id="main">
       <div id="container">
            <header>
            <div id="rainbow">
                <img src="images/rainbow.png" alt="rainbow gradient">
            </div>
            <div id="header">

                <!--home-->

                <p id="logo"><img src="images/logo.png" alt="Bethan Rainforth a comedic dancer">
                </p>

            </div>

            <div id="nav-bar">

                <nav>

                    <ul id="paint-splatters">
                        <li><a href="index.html" id="home">Home</a>
                        </li>
                        <li><a href="work.html" class="gray">Work</a>
                        </li>
                        <li><a href="gallery.html" class="gray">Gallery</a>
                        </li>
                        <li><a href="hireme.html" class="gray">Hire!</a>
                        </li>


                    </ul>

                </nav>
            </div>
    </div>
    </header>
    <div id="wrapper">
        <img src="images/pic.png" alt="Bethan Rainforth" class="pic">
        <p id="about-text">I am a physical comedian, continuously being inspired by comical characters and exaggerated movement. I fuse elements of dance and theatre to create performances that are somewhat over-the-top, and outrageous. I use locking technique as a foundation build and produce uproarious performances suitable for an eclectic audience. I aim to leave audience members feeling uplifted, swimming in their own tears of laughter, momentarily forgetting any worries or woes. </p>
    </div>
</div>


<div id="my-work">
    <div class="leftrule"></div>
    <p id="work">My Work!</p>
    <div class="rightrule"></div>
</div>

    <div class="dancer2">
      <img src="images/dancer1.png">
    </div>
     <div class="dancer1">
      <img src="images/dancer2.png">
    </div>

    <div id="footer">
    <div class="container">
        <div class="dancerfoot">
            <img src="images/dancerfoot.png" alt="dancer jumping over footer">
        </div>
        <div class="danceleft">
            <img src="images/danceleft.png" alt="dancer to the left kicking">
        </div>
        <div class="danceright" >
            <img src="images/danceright.png" alt="dancer to the right shaking it">
        </div>
        <footer>&copy; 2015 Bethan Rainforth


        </footer>
        </div>

        </div>

        </body>



  html,
  body {
background-image: url(images/background.png);
width: 989px;
margin: 0 auto;
min-height: 100%;
 }
#main {
max-width: 940px;
 }
#header {
margin-top: 60px;
}


#rainbow img {
width: 120%;
margin-bottom: 12px;
}
 nav a {
font-family: Hobo Std;
padding: 50px;
}
ul {
list-style-type: none;
}
nav {
text-align: center;
margin-left: 20px;
 }

#nav-bar {
margin-left: -40px;
}
 a {
text-decoration: none;
}
nav li {
display: inline;
width: 150px;
}
   .gray,
  a:hover,
 a:visited,
 a:active {
color: #a5a5a5;
text-decoration: none;
 }
footer {
color: #fff;
text-align: center;
overflow: hidden;
margin-top: 37%;
}
#work {
color: #a5a5a5;
font-family: Hobo Std;
font-size: 1.3em;
text-align: center;
}

#logo img {
width: 320px;
margin-top: -60px;
}

img.pic {
width: 260px;
float: left;
margin-left: 70px;
margin-top: 68px;
}
#wrapper {
background-image: url(images/border.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 730px;
height: 490px;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: -70px;
 }
#home {
background-image: url(images/pinkpaint.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 30px;
margin: 0 auto;
color: #000;
}
div#video1 {
float: right;
border: 15px solid #373636;
box-shadow: 0px 0px 0px 8px rgba(55, 54, 54, .3);
background-color: #373636;
height: 100%;
text-align: center;

}
div#video2 {
border: 15px solid #373636;
box-shadow: 0px 0px 0px 8px rgba(55, 54, 54, .3);
width: 49.6%;
margin: 0 -2em;
background-color: #373636;
height: 100%;
text-align: center;
}
.videos {
margin-top: 65px;

}
 iframe {
 margin-top: 5px;
}
p#about-text {
font-family: Hobo Std;
color: #7ca5d2;
font-size: 1.2em;
line-height: 35px;
margin: 75px;
padding-top: 68px;
}

div.dancer2 {
margin-left: 80.5%;
margin-bottom: -20%;
position: relative;
top: -130px;
}
div.dancer2 img {
width: 200px;
}

div.dancer1 {
margin-bottom: -30%;
position: relative;
top: -230px;
}
div.leftrule {
border-top: 2px solid #a5a5a5;
width: 80px;
margin-left: 360px;
margin-bottom: -11px;
}
div.rightrule {
border-top: 2px solid #a5a5a5;
width: 80px;
margin-left: 546px;
margin-top: -26px;
}
div.dancerfoot img {
width: 30%;
margin-left: 35%;
margin-top: 200px;
position: absolute;
top: 0;
left: 0;
}
div.danceleft img {
width: 20%;
margin-top: 19%;
position: absolute;
top: 0;
left: 0;
}
div.danceright img {
width: 20%;
margin-left: 85%;
position: absolute;
top: 0;
left: 0;
margin-top: 14%;
 }
#footer {
position: relative;
margin-top: -100px;
}
#website {
text-align: right;
}

enter image description here

Answer 1

放置一些media_quires，如

@media (max-width:1030px){div#video1{float:none;}}

在最小化浏览器时，我的部分布局会被切断

1 个答案: