javascript - 如何去掉黄色部分的空白？

Question

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，但它似乎不起作用。

Answer 1

#chatbox{
  position:absolute;
  height:100%;
  width:100%;
  top:0px;
  left:0px;
}

#cmsgs{
  position:absolute;
  top:0px;
  left:0px;
  background-color:grey;
  width:80%;
  height:95%;
}

#input{
  display:inline-block;
  position:absolute;
  bottom:0px;
  left:0px;
  height:5%;
  width:80%;
  background-color:rgb(0,255,255);
}

#ul{
  position:absolute;
  right:0px;
  top:0px;
  height:100%;
  width:20%;
  background-color:yellow;

}

  <div id="chatbox">

    <div id="cmsgs"></div>

    <input id="input">

    <div id="ul"></div>
  </div>

 #ul{
        position:absolute;
        height:100%;
        top:0px;
        right:0px;
        width:calc(100%-(width of grey block)px); //assuming you want a specific pixel width
        background-color:yellow;
    }

计算或设置灰色 block 的宽度，以便它是已知的(我会用 css 百分比设置它)。

用它来计算黄色 block 的宽度。这可以使用 javascript 或 css 通过多种方式完成。