function Chat(id) {
  function resize() {
    var chat_emb = $("#" + id);
    var height = $(window).height() - 19;
    var width = $(window).width() - 19;
    chat_emb.height(height);
    chat_emb.width(width);
    var boxw = chat_emb.width() / 1.20;
    var boxh = chat_emb.height();
    var boxtop = (boxh / 5) / 90;
    boxleft = (boxw / 5) / 90;
    var box = $("#cmsgs")
    var input = $("#input")
    var ulw = width - boxw
    var ulh = chat_emb.height() + 3;
    var ul = $("#ul");
    var rightul = (ulw + boxw - width) + 10
    //check if box has a height
    //if it does then no need to make element
    if (box.height()) {
      box.css("position", "absolute");
      box.css("top", boxtop);
      box.css("left", boxleft)
      box.height(boxh)
      box.width(boxw);

    } else {
      var box = document.createElement("div");
      box.id = "cmsgs";
      document.getElementById(id).appendChild(box);
      var box = $("#cmsgs")
      box.css("position", "absolute");
      box.css("top", boxtop);
      box.css("left", boxleft);
      box.height(boxh)
      box.width(boxw);
    }
    if (!input.height()) {
      var input = document.createElement("input");
      input.setAttribute("id", "input");
      document.getElementById(id).appendChild(input);
      input = $("#input")
      input.width(boxw - 5)
      input.css("position", "absolute");
      input.css("left", boxleft);
      input.css("bottom", boxtop);
    } else {
      input = $("#input")
      input.width(boxw - 5)
      input.css("position", "absolute");
      input.css("left", boxleft);
      input.css("bottom", boxtop);
    }

    if (ul.height()) {
      ul.height(ulh + 3);
      ul.width(ulw);
      ul.css("postition", "absolute");
      ul.css("right", rightul);
    } else {
      var ul = document.createElement("div");
      document.getElementById(id).appendChild(ul);
      ul.id = "ul";
      ul = $("#ul");
      ul.height(ulh + 6);
      ul.width(ulw);
      ul.css("position", "absolute");
      ul.css("right", rightul);
    }
  }
  resize();
  //resize event
  $(window).bind("resize", function() {
    resize()
  });
  $(document).bind("resize", function() {
    resize()
  });
  var box = $("#cmsgs");
  box.css("background-color", "gray");
  var input = $("#input")
  input.css("background-color", "#0FF");
  var ul = $("#ul");
  ul.css("background-color", "#FF0");
  ul.css("padding", 0, 0, 0, 0, 0);
  ul.css("margin", 0, 0, 0, 0, 0);
  box.css("padding", 0, 0, 0, 0, 0);
  box.css("margin", 0, 0, 0, 0, 0);
}
Chat("chatbox")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatbox"></div>

正如您在运行代码片段时看到的,黄色部分有很多空白。我怎样才能摆脱它呢?我知道这可能很难理解,因为代码有点挤在里面。所以,如果你有任何困难,我会解释更多。
我试过将边距和填充设置为0,但似乎不起作用。

最佳答案

你可以试试下面的代码。代码中的一些更改

function Chat(id) {
  function resize() {
    var chat_emb = $("#" + id);
    var height = $(window).height() - 19;
    var width = $(window).width() - 19;
    chat_emb.height(height);
    chat_emb.width(width);
    var boxw = chat_emb.width() / 1.20;
    var boxh = chat_emb.height();
    var boxtop = (boxh / 5) / 90;
    boxleft = (boxw / 5) / 90;
    var box = $("#cmsgs")
    var input = $("#input")
    var ulw = $(window).width() - boxw
    var ulh = chat_emb.height() + 3;
    var ul = $("#ul");
    var rightul = (ulw + boxw - $(window).width())
    //check if box has a height
    //if it does then no need to make element
    if (box.height()) {
      box.css("position", "absolute");
      box.css("top", boxtop);
      box.css("left", boxleft)
      box.height(boxh)
      box.width(boxw);

    } else {
      var box = document.createElement("div");
      box.id = "cmsgs";
      document.getElementById(id).appendChild(box);
      var box = $("#cmsgs")
      box.css("position", "absolute");
      box.css("top", boxtop);
      box.css("left", boxleft);
      box.height(boxh)
      box.width(boxw);
    }
    if (!input.height()) {
      var input = document.createElement("input");
      input.setAttribute("id", "input");
      document.getElementById(id).appendChild(input);
      input = $("#input")
      input.width(boxw - 5)
      input.css("position", "absolute");
      input.css("left", boxleft);
      input.css("bottom", boxtop);
    } else {
      input = $("#input")
      input.width(boxw - 5)
      input.css("position", "absolute");
      input.css("left", boxleft);
      input.css("bottom", boxtop);
    }

    if (ul.height()) {
      ul.height($(window).height());
      ul.width(ulw);
      ul.css("postition", "absolute");
      ul.css("right", rightul);
    } else {
      var ul = document.createElement("div");
      document.getElementById(id).appendChild(ul);
      ul.id = "ul";
      ul = $("#ul");
      ul.height($(window).height());
      ul.width(ulw);
      ul.css("position", "absolute");
      ul.css("right", rightul);
    }
  }
  resize();
  //resize event
  $(window).bind("resize", function() {
    resize()
  });
  $(document).bind("resize", function() {
    resize()
  });
  var box = $("#cmsgs");
  box.css("background-color", "gray");
  var input = $("#input")
  input.css("background-color", "#0FF");
  var ul = $("#ul");
  ul.css("background-color", "#FF0");
  ul.css("padding", 0, 0, 0, 0, 0);
  ul.css("margin", 0, 0, 0, 0, 0);
  ul.css("top", 0);
  box.css("padding", 0, 0, 0, 0, 0);
  box.css("margin", 0, 0, 0, 0, 0);
}
Chat("chatbox")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatbox"></div>

10-05 20:37
查看更多