1

I have an issue with the div on my page. It's the only one I have, and it covers the middle of my page. With a few tweaks in CSS, I made it go all the way down.

The problem though, is that the video(which is inside the div element), is sneaking out like so:

enter image description here

Here's the 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>

And here's the 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;
}
4

2 回答 2

1

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

overflow: hidden;

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

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

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

  1. 隐藏任何从盒子中泄漏出来的东西，防止大于盒子大小的元素显示容器边缘看起来“未绑定”的部分

  2. 如果使用语义 HTML 正确选择元素，许多不受约束的元素height会width自动调整大小以适应其内容

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

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

于 2013-05-04T17:57:44.743 回答
0

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

于 2013-05-04T18:03:06.070 回答