如何摆脱黄色部分的空白？

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> 

As you can see when you run the snippet the yellow part has a lot of whitespace. How can i get rid of it? I know this might be hard to understand because the code is kinda crammed in there. So, if you have any trouble understanding ill explain more. I've tried to set margins and paddings to 0 but it doesn't seem to work.

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;
    }

calculate or set the width of the grey block so that it is known (i would set it with a css percentage).

use that to calculate the width of the yellow block. this can be done in several ways using javascript or css.

Answer 2

Rather than absolute positioning, you can use position:relative on the parent div, and use a simple float: right.

This way, you wouldn't even need to know the width of anything in advance.

Answer 3

You could try below code. Few changes in your code

 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>