DIV元素不覆盖其所有内容 [英] DIV element does not cover all of its content
问题描述
我的网页上有div的问题。这是我唯一的一个，它覆盖了我的页面的中间。在CSS中进行了一些调整，我使它一路下降。
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.
问题是，视频（位于div元素中）正在偷偷摸摸：
The problem though, is that the video(which is inside the div element), is sneaking out like so:
这里是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;
}
推荐答案
是手动调整黑框的高度，或者可能添加
The only solution I can think of is manually tweaking the black frame's height, or perhaps adding a
overflow: hidden;
属性到框架中（在相当难以理解的标签系统中，我相信< Center> ）。
property to the frame (in your rather difficult-to-understand tag system, I believe it would be <Center>).
现在，< iframe> code>元素从其父容器（黑盒子）溢出 。通过指定此框的高度，可以控制大小。
Right now, the <iframe> element is overflowing from its parent container (the black box). By specifying a height for this box, you can control the size.
通过指定 overflow：hidden 隐藏框的溢出 - 从而做两件事之一：
By specifying overflow: hidden, you can hide the box's overflow - thus doing one of two things:
-
隐藏任何泄露出来的东西，
Hiding anything that leaks out of the box, preventing elements that are larger than the box's size to show parts that will seem "unbound" by the container's edges
如果元素是用语义HTML正确选择的，那么许多元素不受 height 和 width 的约束会自动调整大小以适合其内容
If the elements are chosen properly with semantic HTML, many elements that are not bound by height and width will automatically size themselves to fit their contents
另一种可能的解决方案是指定 position：relative 和/或 float
Another possible solution would be to specify position: relative and/or float: none for both the container and its children, which sometimes solves the problem.
再次强调，对我们来说难以
To emphasize again, it's difficult for us to test and debug the code you've given us because it is effectively out of date.
这篇关于DIV元素不覆盖其所有内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
