Question

我有一个这样的页面。单击单选按钮，尝试在右下角设置innerDiv。即使用户调整浏览器大小，它也不应与页脚重叠并起作用。

＆＃13;

$(function() {
  startTime();
  positionDiv();
  $("#innerDiv").draggable({
    containment: "parent"
  });
});

$(document).keyup(function(e) {
  if (e.keyCode == 27) {
    $("#innerDiv").hide();
  } else if (e.keyCode == 13) {
    $("#innerDiv").show();
  }
});

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
  var t = setTimeout(function() {
    startTime()
  }, 500);
}

function checkTime(i) {
  if (i < 10) {
    i = "0" + i
  };
  return i;
}

function positionDiv() {
  console.log('Ready to position inner div');
  var innerDiv = document.getElementById("innerDiv");
  if (document.getElementById('centerCheckbox').checked) {
    console.log('Setting the position to center');
    innerDiv.className = "box";
    $('#boxText').text("Center")
  } else if (document.getElementById('lrCheckbox').checked) {
    console.log('Setting the position to lower right corner');
    innerDiv.className = "lowerRightCorner";
    $('#boxText').text("Lower Right Corner")
  }
}

＆＃13;

html,
body {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  color: #000;
  background-color: #fff;
}
html {
  overflow-y: hidden;
}
.head,
.foot,
.middle {
  position: absolute;
  width: 100%;
  left: 0;
}
.middle {
  top: 100px;
  bottom: 50px;
  height: 400px;
  background-color: #ffd;
}
.head {
  height: 100px;
  top: 0;
  background-color: #000;
  color: #fff;
}
.foot {
  height: 50px;
  bottom: 0;
  background-color: #000;
}
.middle p {
  border: 1px solid #00f;
  margin: 0;
}
.box {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 30em;
  height: 18em;
  margin-top: -9em;
  margin-left: -15em;
  border: 2px solid #ccc;
  background-color: #f3f3f3;
}
.lowerRightCorner {
  position: relative;
  bottom: 0;
  right: 0;
  width: 30em;
  height: 18em;
  margin-bottom: 50px;
  border: 2px solid #ccc;
  background-color: #f3f3f3;
}
#clock {
  float: right;
  margin-right: 10px;
  font-size: 24px;
  position: relative;
}
.position {
  top: 30%;
  position: relative;
}
.helpText {
  color: yellow;
  font-size: 20px;
  margin-left: 50%;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Vertica Web</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

  <body>
    <div class="head">
      <div class="position">
        <span>Position: </span>
        <input type="radio" name="position" value="center" id="centerCheckbox" onclick="positionDiv()" checked>Center
        <input type="radio" name="position" value="lowerRight" id="lrCheckbox" onclick="positionDiv()">Lower Right
      </div>
      <div class="helpText">Press Esc key to hide the window. Enter to show it again.</div>
      <div id="clock"></div>
    </div>
    <div class="middle">
      <div id="innerDiv">
        <span id="boxText"></span>
      </div>
    </div>
    <div class="foot">footer</div>
  </body>

</html>

＆＃13;

Answer 1

position: relative不起作用，它将相对于top left 放置。您必须使用absolute或fixed来完成此操作。

在我改变的片段中

.lowerRightCorner {
  position: relative;
}

到

.lowerRightCorner {
  position: fixed;
}

＆＃13;

$(function() {
  startTime();
  positionDiv();
  $("#innerDiv").draggable({
    containment: "parent"
  });
});

$(document).keyup(function(e) {
  if (e.keyCode == 27) {
    $("#innerDiv").hide();
  } else if (e.keyCode == 13) {
    $("#innerDiv").show();
  }
});

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
  var t = setTimeout(function() {
    startTime()
  }, 500);
}

function checkTime(i) {
  if (i < 10) {
    i = "0" + i
  };
  return i;
}

function positionDiv() {
  console.log('Ready to position inner div');
  var innerDiv = document.getElementById("innerDiv");
  if (document.getElementById('centerCheckbox').checked) {
    console.log('Setting the position to center');
    innerDiv.className = "box";
    $('#boxText').text("Center")
  } else if (document.getElementById('lrCheckbox').checked) {
    console.log('Setting the position to lower right corner');
    innerDiv.className = "lowerRightCorner";
    $('#boxText').text("Lower Right Corner")
  }
}

＆＃13;

html,
body {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  color: #000;
  background-color: #fff;
}
html {
  overflow-y: hidden;
}
.head,
.foot,
.middle {
  position: absolute;
  width: 100%;
  left: 0;
}
.middle {
  top: 100px;
  bottom: 50px;
  height: 400px;
  background-color: #ffd;
}
.head {
  height: 100px;
  top: 0;
  background-color: #000;
  color: #fff;
}
.foot {
  height: 50px;
  bottom: 0;
  background-color: #000;
}
.middle p {
  border: 1px solid #00f;
  margin: 0;
}
.box {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 30em;
  height: 18em;
  margin-top: -9em;
  margin-left: -15em;
  border: 2px solid #ccc;
  background-color: #f3f3f3;
}
.lowerRightCorner {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 30em;
  height: 18em;
  margin-bottom: 50px;
  border: 2px solid #ccc;
  background-color: #f3f3f3;
}
#clock {
  float: right;
  margin-right: 10px;
  font-size: 24px;
  position: relative;
}
.position {
  top: 30%;
  position: relative;
}
.helpText {
  color: yellow;
  font-size: 20px;
  margin-left: 50%;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Vertica Web</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

  <body>
    <div class="head">
      <div class="position">
        <span>Position: </span>
        <input type="radio" name="position" value="center" id="centerCheckbox" onclick="positionDiv()" checked>Center
        <input type="radio" name="position" value="lowerRight" id="lrCheckbox" onclick="positionDiv()">Lower Right
      </div>
      <div class="helpText">Press Esc key to hide the window. Enter to show it again.</div>
      <div id="clock"></div>
    </div>
    <div class="middle">
      <div id="innerDiv">
        <span id="boxText"></span>
      </div>
    </div>
    <div class="foot">footer</div>
  </body>

</html>

＆＃13;

CSS：在右下角设置div

1 个答案: