Question

此后我搜索了很多。到目前为止，我学会了如何使用绝对定位来制作布局。我用7-8盒子做了我的新的第一个布局。他们几个都在主盒子里。我想用youtube视频填写1个方框。我认为一切都是响应绝对定位的盒子和一切也youtube视频响应，但问题是当我把嵌入到我的盒子05没有填满整个盒子我的意思是它填充整个宽度，但有很多空格在高度选项中。我也试过改变填充底部，但如果我改变了谷歌Chrome中的resoultion＆＃34; f12＆＃34;它仍然很糟糕。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div id="box-01" class="box"><p> header </p></div>
  <div id="box-02" class="box"><p> main </p>
    <div id="box-05" class="box">   
     <figure>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/nscrstWZz3M" frameborder="0" allowfullscreen></iframe>
        </figure>



</div>
    <div id="box-06" class="box"><p> video1 </p></div>
    <div id="box-07" class="box">


    </div>
    <div id="box-08" class="box"><p> video2 </p></div>
  </div>

  <div id="box-09" class="box"><p> footer </p></div>


</body>
</html>

和

/* css reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}




/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}







* {
    box-sizing: border-box;
}





body {
  background-color: #333;
  font-size: 1rem;
}



#box-01 {
  background-color: hsla(60, 100%, 60%, .85);

}

#box-02 {
  background-color: hsla(84, 84%, 56%, .85);
}



#box-04 {
  background-color: hsla(279, 60%, 44%, .85);
}



figure {
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}

  figure iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
@media (max-width: 768px) { 


  figure {
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    position: relative;
}

  figure iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

}

.box {
   position:absolute;
}

p {

    font-family:"news_gothic";
    font-size:1.3vw;
    font-size-adjust:auto;

    width:90%;

    color:white;
}




#box-01 {
  background-color: hsla(60, 100%, 60%, .85);
  left: 0;
  right: 0;
  height: 9.259%;

}



}
body {
   font-family: Merriweather, 'Times New Roman', serif;
  font-size: 1.125rem;
  line-height: 2rem;
  color: #333;

}


#box-02 {
  background-color: hsla(84, 84%, 56%, .85);
  top: 9.300%;
  left: 0;
  width: 70%;
  height: 74.15vh;
}
@media (max-width: 768px) {

    #box-02 {
    float: right;
  background-color: hsla(84, 84%, 56%, .85);
  top: 9.300%;
  left: 0;
  width: 100%;
  height: 56.15vh;
    max-width: 768px;

}

}


#box-05 {
  background-color: hsla(84, 84%, 56%, .85);
  top: 24.300%;
  left: 4.7%;
  width: 32%;
  height: 41.60vh;
}
@media (max-width: 768px) { 

  #box-05 {
  background-color: hsla(84, 84%, 56%, .85);
  top: 24.300%;
  left: 0;
  width: 47%;
  height: 41.12vh;
    max-width: 768px;
     }


}
#box-06 {
  background-color: hsla(50, 50%, 56%, .85);
  top: 11.150%;
  left: 4.7%;
  width: 32%;
  height: 6.11vh;
}
@media (max-width: 768px) { 

  #box-06 {
 background-color: hsla(50, 50%, 56%, .85);
  top: 11.150%;
      left: 0;
  width: 47%;
  height: 6.11vh;
    max-width: 768px;

  }

}
#box-07 {
  background-color: hsla(84, 84%, 56%, .85);
  top: 24.300%;
  left: 49%;
  width: 32%;
  height: 41.60vh;
}
@media (max-width: 768px) { 

  #box-07 {
  background-color: hsla(84, 84%, 56%, .85);
  top: 24.300%;
  left: 52%;
  width: 48%;
  height: 41.12vh;
    max-width: 768px;
    position:absolute;


  }

}
#box-08 {
  background-color: hsla(50, 50%, 56%, .85);
  top: 11.150%;
  left: 49%;
  width: 32%;
  height: 6.11vh;
}
@media (max-width: 768px) { 

  #box-08 {
 background-color: hsla(50, 50%, 56%, .85);
  top: 11.150%;
  left: 52%;
  width: 48%;
  height: 6.11vh;
    max-width: 768px;

  }

}

#box-09 {
  background-color: hsla(50, 50%, 56%, .85);
  right: 0;
  left: 0;
  bottom: 0;
  height: 16.58vh;
}

}

为什么不垂直填充它是什么问题？

Answer 1

#box-05上有一个固定的高度，因此固定高度不具响应性，因为它不会随着视频的宽高比而缩放。移除它并使其符合保持响应式youtube嵌入的figure内部。

＆＃13;

/* css reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}




/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}







* {
    box-sizing: border-box;
}





body {
  background-color: #333;
  font-size: 1rem;
}



#box-01 {
  background-color: hsla(60, 100%, 60%, .85);

}

#box-02 {
  background-color: hsla(84, 84%, 56%, .85);
}



#box-04 {
  background-color: hsla(279, 60%, 44%, .85);
}



figure {
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}

  figure iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
@media (max-width: 768px) { 


  figure {
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    position: relative;
}

  figure iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

}

.box {
   position:absolute;
}

p {

    font-family:"news_gothic";
    font-size:1.3vw;
    font-size-adjust:auto;

    width:90%;

    color:white;
}




#box-01 {
  background-color: hsla(60, 100%, 60%, .85);
  left: 0;
  right: 0;
  height: 9.259%;

}



}
body {
   font-family: Merriweather, 'Times New Roman', serif;
  font-size: 1.125rem;
  line-height: 2rem;
  color: #333;

}


#box-02 {
  background-color: hsla(84, 84%, 56%, .85);
  top: 9.300%;
  left: 0;
  width: 70%;
  height: 74.15vh;
}
@media (max-width: 768px) {

    #box-02 {
    float: right;
  background-color: hsla(84, 84%, 56%, .85);
  top: 9.300%;
  left: 0;
  width: 100%;
  height: 56.15vh;
    max-width: 768px;

}

}


#box-05 {
  background-color: hsla(84, 84%, 56%, .85);
  top: 24.300%;
  left: 4.7%;
  width: 32%;
}
@media (max-width: 768px) { 

  #box-05 {
  background-color: hsla(84, 84%, 56%, .85);
  top: 24.300%;
  left: 0;
  width: 47%;
    max-width: 768px;
     }


}
#box-06 {
  background-color: hsla(50, 50%, 56%, .85);
  top: 11.150%;
  left: 4.7%;
  width: 32%;
  height: 6.11vh;
}
@media (max-width: 768px) { 

  #box-06 {
 background-color: hsla(50, 50%, 56%, .85);
  top: 11.150%;
      left: 0;
  width: 47%;
  height: 6.11vh;
    max-width: 768px;

  }

}
#box-07 {
  background-color: hsla(84, 84%, 56%, .85);
  top: 24.300%;
  left: 49%;
  width: 32%;
  height: 41.60vh;
}
@media (max-width: 768px) { 

  #box-07 {
  background-color: hsla(84, 84%, 56%, .85);
  top: 24.300%;
  left: 52%;
  width: 48%;
  height: 41.12vh;
    max-width: 768px;
    position:absolute;


  }

}
#box-08 {
  background-color: hsla(50, 50%, 56%, .85);
  top: 11.150%;
  left: 49%;
  width: 32%;
  height: 6.11vh;
}
@media (max-width: 768px) { 

  #box-08 {
 background-color: hsla(50, 50%, 56%, .85);
  top: 11.150%;
  left: 52%;
  width: 48%;
  height: 6.11vh;
    max-width: 768px;

  }

}

#box-09 {
  background-color: hsla(50, 50%, 56%, .85);
  right: 0;
  left: 0;
  bottom: 0;
  height: 16.58vh;
}

}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <div id="box-01" class="box">
    <p> header </p>
  </div>
  <div id="box-02" class="box">
    <p> main </p>
    <div id="box-05" class="box">
      <figure>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/nscrstWZz3M" frameborder="0" allowfullscreen></iframe>
      </figure>


    </div>
    <div id="box-06" class="box">
      <p> video1 </p>
    </div>
    <div id="box-07" class="box">


    </div>
    <div id="box-08" class="box">
      <p> video2 </p>
    </div>
  </div>

  <div id="box-09" class="box">
    <p> footer </p>
  </div>


</body>

</html>

＆＃13;

我的响应式youtube嵌入视频并没有填满整个框

1 个答案: