css怎么让内容不撑开高度,CSS无float情况下，父级高度无法被子内容撑开的的问题...

X

data-id="video1.html"

src="/screen/video4.html" frameborder="no" border="0" seamless id="iframe4"

scrolling="no">

如上的dom结构 dialog是遮罩层的窗口

#dialog {

background-color: transparent;

/*background-color: #fff;*/

/*background-color: #041c42;*/

padding: 1px;

/*height: 80%;*/

position: fixed;

margin: auto;

left: 0;

right: 0;

top: 0;

bottom: 0;

width: 70%;

z-index: 99999;

display: none;

}

#dialog p {

margin: 0 0 12px;

height: 24px;

line-height: 24px;

}

#dialog p.close {

position: absolute;

text-align: right;

/* padding-right: 10px; */

left: 97%;

top: 1%;

}

#dialog p.close a {

position: absolute;

padding: 2px;

text-align: center;

background-color: #007bff;

color: #f5f2f2;

text-decoration: none;

display: block;

width: 30px;

height: 30px;

border-radius: 30px;

}

.dialog-content {

height: auto;

overflow: hidden;

margin-top: 10%;

border: 3px solid #416a99;

background-color: #041c42;

box-sizing: border-box;

position: relative;

}

.video-control {

margin: 10px 0;

height: 80%;

}

实际效果：

想要的效果 就是 视频窗口多大 dialog就多大 周围没有留白 完全靠内容撑起父级的高度 请问什么地方要修改