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但它似乎不起作用。
答案 0 :(得分：0)
#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;
}
计算或设置灰色块的宽度，以便知道它（我会用css百分比设置它）。
用它来计算黄色块的宽度。这可以通过javascript或css以多种方式完成。
答案 1 :(得分：-1)
您可以在父div上使用position:relative，而不是绝对定位，并使用简单的float：right。
这样，你甚至不需要事先知道任何东西的宽度。
答案 2 :(得分：-1)
您可以尝试以下代码。您的代码中几乎没有变化
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>