Question

我希望在iframe上方悬停4个按钮，这些按钮应占用浏览器中100％的可用空间。

实际上iframe太大了，所以出现了滚动条，我根本看不到任何按钮！我不明白发生了什么......通常情况下，我认为按钮会出现在我指定的位置，但无济于事......

这里是我的html，css和js：

＆＃13;

html,
body {
  height: 100vh;
  width: 100vw;
}

#bt1 {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 20px;
  top: 50px;
}

#bt2 {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 20px;
  top: 120px;
}

#bt3 {
  width: 50px;
  position: absolute;
  height: 50px;
  left: 20px;
  top: 190px;
}

#bt4 {
  width: 50px;
  position: absolute;
  height: 50px;
  left: 20px;
  top: 260px;
}

#theframe {
  width: 100%;
  height: 100%;
}

.holder {
  width: 100%;
  height: 100%;
  position: relative;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Structure</title>
  <!-- Fonts -->
  <link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  <!-- FAVICON -->
  <link rel='shortcut icon' type='image/x-icon' href='images/favicon.png' />
  <!-- My Styles -->
  <link href="main.css" rel="stylesheet">

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>
    function One() {
      $("#theframe").attr('src', "https://www.youtube.com/embed/FTQbiNvZqaY");
    }

    function Two() {
      $("#theframe").attr('src', "https://www.youtube.com/embed/TvnYmWpD_T8");
    }

    function Three() {
      $("#theframe").attr('src', "https://www.youtube.com/embed/djV11Xbc914");
    }

    function Four() {
      $("#theframe").attr('src', "https://www.youtube.com/embed/Xt2IcK78NOw");
    }
  </script>
</head>

<body>
  <div class="holder">
    <iframe src="https://www.youtube.com/embed/3sYlJsaUAIg" id="theframe" frameborder="0" allowfullscreen />

    <button type="submit" id="bt1" onclick="One();">
             <img src="https://orig00.deviantart.net/4c1b/f/2009/060/d/f/round_glossy_green_button_by_fbouly.png" />
        </button>
    <button type="submit" id="bt2" onclick="Two();">
            <img src="https://orig00.deviantart.net/4c1b/f/2009/060/d/f/round_glossy_green_button_by_fbouly.png" />
        </button>
    <button type="submit" id="bt3" onclick="Three();">
            <img src="https://orig00.deviantart.net/4c1b/f/2009/060/d/f/round_glossy_green_button_by_fbouly.png" />
        </button>
    <button type="submit" id="bt4" onclick="Four();">
            <img src="https://orig00.deviantart.net/4c1b/f/2009/060/d/f/round_glossy_green_button_by_fbouly.png"/>
        </button>
  </div>
</body>

<footer>

</footer>

</html>

＆＃13;

Answer 1

<iframe>标记不是自闭元素，因此不是：

<iframe src="https://www.youtube.com/embed/3sYlJsaUAIg" id="theframe" frameborder="0" allowfullscreen />

你必须像这样关闭标签：

<iframe src="https://www.youtube.com/embed/3sYlJsaUAIg" id="theframe" frameborder="0" allowfullscreen></iframe>

您还可以为按钮内的图像添加一些样式，以确保它符合按钮的大小。

button img {
  width: 100%;
}

最后，将按钮的类型从submit更改为button，因为他们不会提交数据。

＆＃13;

html,
body {
  height: 100vh;
  width: 100vw;
}

button img {
  width: 100%;
}

#bt1 {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 20px;
  top: 50px;
}

#bt2 {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 20px;
  top: 120px;
}

#bt3 {
  width: 50px;
  position: absolute;
  height: 50px;
  left: 20px;
  top: 190px;
}

#bt4 {
  width: 50px;
  position: absolute;
  height: 50px;
  left: 20px;
  top: 260px;
}

#theframe {
  width: 100%;
  height: 100%;
}

.holder {
  width: 100%;
  height: 100%;
  position: relative;
}

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
  function One() {
    $("#theframe").attr('src', "https://www.youtube.com/embed/FTQbiNvZqaY");
  }

  function Two() {
    $("#theframe").attr('src', "https://www.youtube.com/embed/TvnYmWpD_T8");
  }

  function Three() {
    $("#theframe").attr('src', "https://www.youtube.com/embed/djV11Xbc914");
  }

  function Four() {
    $("#theframe").attr('src', "https://www.youtube.com/embed/Xt2IcK78NOw");
  }
</script>
<div class="holder">
  <iframe src="https://www.youtube.com/embed/3sYlJsaUAIg" id="theframe" frameborder="0" allowfullscreen></iframe>

  <button type="button" id="bt1" onclick="One();">
             <img src="https://orig00.deviantart.net/4c1b/f/2009/060/d/f/round_glossy_green_button_by_fbouly.png" />
        </button>
  <button type="button" id="bt2" onclick="Two();">
            <img src="https://orig00.deviantart.net/4c1b/f/2009/060/d/f/round_glossy_green_button_by_fbouly.png" />
        </button>
  <button type="button" id="bt3" onclick="Three();">
            <img src="https://orig00.deviantart.net/4c1b/f/2009/060/d/f/round_glossy_green_button_by_fbouly.png" />
        </button>
  <button type="button" id="bt4" onclick="Four();">
            <img src="https://orig00.deviantart.net/4c1b/f/2009/060/d/f/round_glossy_green_button_by_fbouly.png"/>
        </button>
</div>


<footer>

</footer>

＆＃13;

使按钮悬停在iframe上

1 个答案: