Question

另一个问题可能无法回答：在我的网站上，我在div容器中有一个iframe：

DIV：

<div id='frame'>
    <iframe id='content' name='contentfield' ></iframe>
</div>

在css文件中有：

的CSS：

div#frame{
position:absolute;
display:flex;
background-color:green;(just for my testing)
top:100px;
float:left;
width:calc(100vw - 200px);
height:calc(100vh - 100px);
}
iframe#content{
border:none;
width:100%;
height:100%;
}

此iframe显示了我的网站的不同方面，例如index.php（很多index.php的）因此javascript：

加载了一个

function start(id){active = id;
    document.getElementById('content').src='content/hallo/';
}

所以有：content / hallo / index.php。 index.php是普通html文档，但正文设置为px中的特定宽度：

<body style='width:1000px'>
    ...
</body>

现在：如果浏览器窗口大于1200px（距主体100px，另一个div为200px，请参见div＃frame），iframe的内容宽度为1000px但向左浮动。我希望它居中，以便如果浏览器窗口宽度为1600px，则内容的边距为左边=右边距为200px a.s.o.

编辑：屏幕截图显示未完成的： darkgray is the menu, light gray the iframe and, as you guess right, the pic i a part of me

Answer 1

解决方案：您将设置以下属性

max-width:auto;

Answer 2

我有类似的经验，当html5不支持iframe上的align属性，让你控制位置。我在iframe上使用display:block和margin:auto解决了这个问题。

由于你的身体宽度为1000像素，因此它总是向左拉（导致内部的所有内容更多地显示在左侧，因为它在身体中居中），除非您为此添加边距以将其推入中心

＆＃13;

.frame{
width:100vw;
height:100vh;
min-height:100vh;
}

iframe{
display:block;
margin:auto;
height:100vh;
min-height:100vh;
}

＆＃13;

<div id='frame'>
    <iframe id='content' name='contentfield' align="center"></iframe>
</div>

＆＃13;

将iframe的内容集中在特定宽度的内容主体上

2 个答案: