Question

我的页面上有div的问题。这是我唯一拥有的，它涵盖了我的页面中间。通过CSS中的一些调整，我让它一路走下去。

问题是，视频（在div元素内）正在偷偷溜出来：

enter image description here

这是HTML：

<html>
<head>
 <link rel="shortcut icon" href="Images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="Style.css" media="screen" />
    <title>Arthur</title>
    <meta content="text/html" charset="windows-1251">
    </head>
<Body background="Images/background2.jpg">
<A Href="main.html"><IMG class="imgborder" src="Images/button.png" align="left"      height="50"></A>
<div id="wrapper" style="background-color:black; width:60%; margin-left: auto ; margin-right: auto ;">

<center><img width="60%" src="Images/logo2.png"></center>
<BR><BR>
<center><img class="imgborder" height="300" src="Images/muller.jpg"></center>
<Font size="5" color="crimson" face="Calibri">

<Center><P align="justify">... </P>

<P align="justify">...</P>

<P align="justify">...</P></Font></Center>



<Center><iframe width="640" height="360" src="..." frameborder="5" 
allowfullscreen></iframe></Center>
<Font size="5" color="crimson" face="Calibri"><P>Thomas Muller</P></font>



</div>
</body>
</html>

这是CSS：

@charset"utf-8";
/* CSS Document*/
/*This section is for links*/
a:link {
    font-weight:normal;
    color:crimson
}
a:visited {
    font-weight:normal;
    color:Crimson;
}
a:hover {
    font-weight:bold;
    color: Royalblue;
    font-variant:small-caps;
}
/*This section is for a paragraph section*/
p {
    font-style:normal;
    font-size:18px;
}
blue {
    color:crimson;
}
/*This section is for the image's black border.*/
.imgborder {
    border-color: crimson;
    border:thick;
    border-style:outset;
}
.body {
    background-color: #0000FF;
}
html, body {
    height:100%;
}
#wrapper {
    margin: 0 auto;
    width: 990px;
    height:100%;
    overflow:hidden;
    position:relative;
}
#navigation {
    margin: 0 auto;
    width: 990px;
    height: 55px;
    background-color: #fff;
}
#bottom Half {
    margin: 0 auto;
    width: 990px;
    height: 100%;
    background-color: #4d3c37;
}
div {
    /* set div to full width and height */
    width: 100%;
    height: 100%;
}
p {
    margin-left:2cm;
    margin-right:2cm;
}

Answer 1

我能想到的唯一解决方案是手动调整黑框的高度，或者添加

overflow: hidden;

框架的属性（在您难以理解的标签系统中，我相信它将是<Center>）。

现在，<iframe>元素从其父容器（黑匣子）中溢出。通过指定此框的高度，您可以控制大小。

通过指定overflow: hidden，您可以隐藏框的溢出 - 从而执行以下两项操作之一：

隐藏任何从包装盒中泄漏的物品，防止大于包装盒尺寸的元件显示容器边缘看似“未绑定”的部件
如果使用语义HTML正确选择元素，则许多未受height和width约束的元素会自动调整大小以适合其内容

另一种可能的解决方案是为容器及其子容器指定position: relative和/或float: none，这有时可以解决问题。

再次强调，我们很难测试并调试你给我们的代码，因为它实际上已经过时了。

Answer 2

对视频的样式使用inherit。像显示样式属性可以是'继承'，以及高度和宽度。

DIV元素未涵盖其所有内容

2 个答案: