當使瀏覽器最小化時，我的佈局的一部分被切斷

正如您在第一張圖片中看到的，當瀏覽器最小化時，邊框被切斷。第二張圖片是它在所有屏幕尺寸上的外觀。我遇到了一些問題，並花了一些時間試圖弄清楚，但沒有運氣。任何幫助感謝！讓我知道你是否需要更多的代碼片段。我附上了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

來源

2015-07-12 gwerd

在CSS文件置入媒體奎雷斯。像@media（max-width：1030px）{float：none} – MHK

放置一些media_quires像

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

來源

2015-07-12 07:58:05 MHK

嗯，似乎沒有工作。它只是混淆了我的視頻。 – gwerd

給我完整的代碼，我會爲你檢查它。 – MHK

我繼續並添加了我的代碼。對不起，花了這麼長時間。 – gwerd

當使瀏覽器最小化時，我的佈局的一部分被切斷

回答

相關問題