Fatal编程技术网

Javascript 3个分区并排溢出

javascript html css

Javascript 3个分区并排溢出,javascript,html,css,Javascript,Html,Css,我在这个问题上花了几个小时，下面是代码： <!DOCTYPE html> <html> <head> <style> html, body{ height: 100%; max-height: 100%; overflow:hidden; } .controls{ display: table; height: 10%; margin-top: 1%; width: 100%; } #w1

我在这个问题上花了几个小时，下面是代码：

<!DOCTYPE html>
<html>
<head>
<style>
html, body{
    height: 100%;
    max-height: 100%;
    overflow:hidden;
}


.controls{
    display: table;
    height: 10%;
    margin-top: 1%;
    width: 100%;
}
#w1 {
    width:25%;
}
#can
    float: left;
    padding: 0;
    margin: 0;
    top: 0;
}
#canTwo{
    float: left;
    padding: 0;
    margin: 0;
    top: 0;

}
textarea { 
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    font-size: 1.25vw; 
    height: 100%;
    width: 100%;
}
#w2{
    width:50%;
}
#w3{ 
    width:25%;
}

.controlbuttons {
  display: table-cell;
  height: 100%;

}

</style>
</head>
<body>


<div class="controls">
    <div class="controlbuttons" id="w1"><canvas id = "can" width = "0" height = "0"></div>
    <div class="controlbuttons" id="w2"><textarea rows="3" cols="50"></textarea></div>
    <div class="controlbuttons" id="w3"><canvas id = "canTwo" width = "0" height = "0"></div>
</div>

</div>
<script>

document.addEventListener("DOMContentLoaded", function(event) {
   fitToContainer();
});
var canvas = document.getElementById("can"),
    ctx    = canvas.getContext('2d'),
    canvasTwo = document.getElementById("canTwo"),
    ctxTwo    = canvasTwo.getContext('2d');
function fitToContainer(){

    var control = document.getElementsByClassName("controlbuttons")[0];
    var h = control.clientHeight;
    var w = control.clientWidth;
    canvas.height = h;

    canvas.width = w;

    canvasTwo.height = h;

    canvasTwo.width = w;

    ctx.fillStyle = "green";
    ctx.fillRect(0, 0, 5000, 5000);

    ctxTwo.fillStyle = "green";
    ctxTwo.fillRect(0, 0, 5000, 5000);


}

</script>
</body>
</html>
jsfiddle：

基本上我有一个文本，它的宽度占页面的50%，它正好在中间，有两个。 侧边画布，宽度为25%。 我正试图让它们完全对齐相同的高度，一个接一个，但下面是我的电脑上的外观：

我该怎么办？使用flexbox？我不确定我是否知道如何做到这一点，因为画布的尺寸技术非常复杂。非常感谢您抽出时间。

要将表格单元格项目对齐到顶部，您应该使用：垂直对齐：顶部。两个画布都缺少“高度”和“宽度”属性，请将它们设置为100%。将框大小：边框框添加到文本区域：

宽度和高度属性以及最小/最大属性包括 内容、填充和边框，但不包括边距

因此：

演示：在firefox 53.0.2和Chrome 56.0.2924.87中测试

document.AddEventListenerDomainContentLoaded，functionevent{ 装配容器； }; var canvas=document.getElementByIdcan， ctx=canvas.getContext'2d'， canvasTwo=document.getElementByIdcanTwo， ctxTwo=canvasTwo.getContext'2d'； 功能配件容器{ var control=document.getElementsByClassNamecontrolbuttons[0]； var h=对照组的clientHeight； var w=control.clientWidth； canvas.height=h； 画布宽度=w； canvasTwo.height=h； canvasTwo.width=w； ctx.fillStyle=绿色； ctx.0,0,5000,5000； ctxTwo.fillStyle=绿色； ctxTwo.fillRect0,0,5000,5000； } html， 身体{ 身高：100%； 最大高度：100%； 溢出：隐藏； } .控制{ 显示：表格； 身高：10%； 利润率最高：1%； 宽度：100%； } w1{ 宽度：25%； } 文本区{ 大纲：无； -webkit盒阴影：无； -莫兹盒阴影：无； 盒影：无； 字体大小：1.25vw； 身高：100%； 宽度：100%； 保证金：0； 框大小：边框框； 浮动：左； } w2{ 宽度：50%； } w3{ 宽度：25%； } .控制按钮{ 显示：表格单元格； 身高：100%； 垂直对齐：顶部； } .controlbuttons画布{ 浮动：左； 填充：0； 保证金：0； 排名：0； 身高：100%； 宽度：100%； } 将flexbox应用于.控件以对齐子元素。还将框大小：边框框应用于文本框，因为默认的填充添加了文本框100%的高度。边框框将使填充包含高度

document.AddEventListenerDomainContentLoaded，functionevent{ 装配容器； }; var canvas=document.getElementByIdcan， ctx=canvas.getContext'2d'， canvasTwo=document.getElementByIdcanTwo， ctxTwo=canvasTwo.getContext'2d'； 功能配件容器{ var control=document.getElementsByClassNamecontrolbuttons[0]； var h=对照组的clientHeight； var w=control.clientWidth； canvas.height=h； 画布宽度=w； canvasTwo.height=h； canvasTwo.width=w； ctx.fillStyle=绿色； ctx.0,0,5000,5000； ctxTwo.fillStyle=绿色； ctxTwo.fillRect0,0,5000,5000； } html， 身体{ 身高：100%； 最大高度：100%； 溢出：隐藏； } .控制{ 显示器：flex； 身高：10%； 利润率最高：1%； 宽度：100%； } w1{ 宽度：25%； } 可以浮动：左； 填充：0； 保证金：0； 排名：0； } 坎托{ 浮动：左； 填充：0； 保证金：0； 排名：0； } 文本区{ 大纲：无； -webkit盒阴影：无； -莫兹盒阴影：无； 盒影：无； 字体大小：1.25vw； 身高：100%； 宽度：100%； 框大小：边框框； } w2{ 宽度：50%； } w3{ 宽度：25%； } .控制按钮{ 身高：100%； }
什么决定画布和文本区域的高度？控件容器？你能详细说明问题和修复方法吗？你能详细说明问题和修复方法吗？文本框默认有填充，使其有效大小大于100%；设置边框框可确保填充限制为100%：flexbox用于对齐项目。我删除了表格属性，因为表格不应用于表格数据以外的任何内容，特别是不应用于样式和定位 
textarea {
  /** ... rest of styles ...*/
  margin: 0;
  box-sizing: border-box;
  float: left;
}
.controlbuttons { vertical-align: top; } /* Align items to the top */
.controlbuttons canvas { height: 100%; width: 100%; }