CSS3：左面板和iframe div之间的空格

Question

我有2个div。一个固定的左侧面板和第二个div我有一个iframe。

我在左侧面板和iframe div之间留出了一些空间。我的笔记本电脑输出正确。但在另一台笔记本电脑中，我在左侧面板和iframe之间获得了空间。

我该如何修复它们？

  

注意：我在Pixel中给左侧面板指定了宽度。我不想给   百分比。因为我想要它的宽度固定，即使我做它   响应。

＆＃13;

＆＃13;

.left_panel_div{
  position:fixed;
  height:100%;
  width:320px;
  min-height:100%;
  background:gray;
  float:left;
}

.iframe_div{
  float: left;
    height: 100vh;
    min-width: 100%;
    overflow: hidden;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
  <div class="left_panel_div"></div>
</div>

<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 padding_left_0">
  <div class="iframe_div">
  <iframe src="http://google.com/" width="100%" height="100%"></iframe>
  </div>
</div>

</div>

＆＃13;

＆＃13;

＆＃13;

在图像中，2 div之间有一个空格。如何删除空间以使所有笔记本电脑，台式机看起来都一样？

任何帮助都会很棒。

谢谢。

Answer 1

iframe代码默认浏览器样式使其具有灰色的2像素宽边框。您可以删除边框。只需添加一些CSS样式：

.iframe_div iframe { border: none; }

Answer 2

为什么要使用所有引导类，无论如何都要覆盖它。只需去掉那个固定或绝对的东西。

＆＃13;

＆＃13;

.left_panel_div{
  position:fixed;
  height:100%;
  width:320px;
  min-height:100%;
  background:gray;
}

.iframe_div{
  position: absolute;
  left: 320px;
  height: 100vh;
  overflow: hidden;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <div class="left_panel_div"></div>

  <div class="iframe_div">
    <iframe src="http://google.com/" width="100%" height="100%"></iframe>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;