黄色部分の空白を取り除く方法は？

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

以下のコードを試してみることができます。あなたのコード

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>

Answer 2

#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を使用していくつかの方法で行うことができます。

Answer 3

絶対配置ではなく、position:relativeを親divに使用し、単純なfloat：rightを使用できます。

この方法では、何かの幅を事前に知る必要はありません。