三的div並排導致問題

https://s17.postimg.org/7zkpt511r/imgdivs.png

是我到目前爲止有：

<style type="text/css"> 
.wrapper{ 
    height: 100%; 
    width: 100%; 
} 
.left{ 
    float: left; 
    background: silver; 
    height: 100%; 
} 
.right{ 
background: silver; 
    float: right; 
    height: 100%; 
} 
canvas{ 
position: absolute; 
height: 100%; 
} 
</style> 


<div class = "wrapper"> 
    <div class = "left"></div> 
    <canvas id="canvas"></canvas> 
    <div class = "right"> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 
var WIDTH = 200; //could be anything, comes from previous calculations 
$('#canvas').css("width", WIDTH); 
$('#canvas').css("left", (window.innerWidth - WIDTH)/2); 
$('.left').css("width", (window.innerWidth - WIDTH)/2); 
$('.right').css("width", (window.innerWidth - WIDTH)/2); 

var canvas = document.getElementById("canvas"); 
ctx = canvas.getContext("2d"); 
ctx.fillStyle = "red"; 
ctx.fillRect(0, 0, WIDTH, window.innerHeight); 

</script>

那麼一點解釋，畫布在中間是動態的寬度（用javascript計算）並預先決定了它的高度（100％），它放在頁面的中間，兩邊的div應該相應地拉伸並填充頁面的其餘部分。我的代碼中有很多問題; div有時會溢出一個在另一個之下，由於某種原因，canvas不會填充整個維度等等。

我害怕嘗試在flexbox中做這件事，因爲舊的瀏覽器不支持它，我需要所有的瀏覽器支持。感謝您的時間。

來源

2016-11-19 user7182273

爲了得到正確的填充使用：http://stackoverflow.com/questions/27736288/how-to-fill-the-whole-canvas-with-specific-color我已經刪除浮動和位置：從畫布絕對自你不需要它（全部放在CSS表中）：https：//jsfiddle.net/zd75wq2e/3/ – sinisake

爲了獲得股利的高度工作，你需要把它添加到你的CSS

html { 
    height: 100%; 
} 
body { 
    min-height: 100%; 
}

來源

2016-11-19 14:46:58 Ben

作爲一個解決方案，你需要使用%代替像素的大小元素時：

var WIDTH = 200; //could be anything, comes from previous calculations 
 
var prc = window.innerWidth/100; 
 
var WIDTHPRC = 200/prc; 
 
$('#canvas').css("width", WIDTHPRC + '%'); 
 
$('#canvas').css("left", ((window.innerWidth - WIDTH)/2)/prc + '%'); 
 
$('.left').css("width", ((window.innerWidth - WIDTH)/2)/prc + '%'); 
 
$('.right').css("width", ((window.innerWidth - WIDTH)/2)/prc + '%'); 
 

 
var canvas = document.getElementById("canvas"); 
 
ctx = canvas.getContext("2d"); 
 
ctx.fillStyle = "red"; 
 
ctx.fillRect(0, 0, WIDTH, window.innerHeight);

.wrapper{ 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.left{ 
 
    float: left; 
 
    background: silver; 
 
    height: 100%; 
 
} 
 
.right{ 
 
background: silver; 
 
    float: right; 
 
    height: 100%; 
 
} 
 
canvas{ 
 
position: absolute; 
 
height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="left">left</div> 
 
    <canvas id="canvas">canvas</canvas> 
 
    <div class="right">right</div> 
 
</div>

您也可以使用 $('.left, .right').css("height", $(document.getElementById("canvas")).height());

來源

2016-11-19 15:03:10 Banzay

我在瀏覽器中出現奇怪的問題;畫布沒有完全填充，並且它的高度比側邊div高：https：//s17.postimg.org/t4wjo9j4f/52x.png – user7182273

如果更改'ctx.fillRect（0，0，WIDTH，window。（0，0，WIDTH，$（document.getElementById（「canvas」））。height（））' – Banzay

我一直試圖在this jsfiddle，我得到了一個工作解決方案。我向包裝添加了一個float:left;，我刪除了所有height: 100%;，因爲它們被瀏覽器忽略。我只是根據使用JS的window元素設置高度。

我刪除以及position: absolute;在canvas，因爲不需要做你需要的東西。無論如何，如果你需要它用於其他目的，我的建議是，然後在div class="center"（例如）中插入canvas，並將絕對位置應用於該div內的畫布。

最後我添加了一個$(document).ready(function(){ ... });以確保JS代碼在頁面完全加載時執行。

編輯：的div小號計算使用width: calc(50% - canvasWidth/2);製成，這樣，當你調整窗口的大小，它正在爲好。但我最重要的是使用WIDTH正在產生你的錯誤，但得到$("#canvas").outerWidth()工作正常...

來源

2016-11-19 15:04:00 Kamae

它在我的瀏覽器中溢出，請參閱證據：https：//s21.postimg .org/xn6in6i9j/51x.png – user7182273

WTF ...對不起，它不在我的Oo這意味着一些奇怪的隨機的東西，讓我試圖找出它 – Kamae

現在請檢查：https：//jsfiddle.net/ Kamae/q3ox11dh/3/ – Kamae

不使用的位置是：絕對的它不是佈局

一個良好的初步實踐

您可以考慮使用顯示：彎曲的相同，並考慮使用視口的寬度和高度VW/VH

當你給你的div寬度100％和高度100％沒有任何影響，使其工作，你必須設置HTML，身體{寬度：100％，身高：100％}這是不是一個好的做法，而不是你可以使用vw/vh

檢查這個片段

.wrapper { 
 
    height: 100vh; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    width: 100vw; 
 
} 
 
.left { 
 
    border-right: 1px solid; 
 
    background: silver; 
 
    height: 100%; 
 
    width: 20%; 
 
} 
 
.right { 
 
    background: silver; 
 
    width: 30%; 
 
    height: 100%; 
 
    border-left: 1px solid; 
 
} 
 
canvas { 
 
    width: 60%; 
 
    height: 100%; 
 
}

<div class="wrapper"> 
 
    <div class="left"></div> 
 
    <canvas id="canvas"></canvas> 
 
    <div class="right"> 
 
    </div>

解決方案，而顯示：彎曲

.wrapper { 
 
    height: 100vh; 
 
    border: 1px solid black; 
 
    position: relative; 
 
    width: 100vw; 
 
} 
 
.left { 
 
    border-right: 1px solid; 
 
    background: silver; 
 
    height: 100%; 
 
    width: 20%; 
 
    position: absolute; 
 
    left: 0; 
 
} 
 
.right { 
 
    background: silver; 
 
    width: 30%; 
 
    height: 100%; 
 
    border-left: 1px solid; 
 
    float: right; 
 
} 
 
canvas { 
 
    width: 60%; 
 
    height: 100%; 
 
}

<div class="wrapper"> 
 
    <div class="left"></div> 
 
    <canvas id="canvas"></canvas> 
 
    <div class="right"> 
 
    </div>

希望它可以幫助

來源

2016-11-19 15:11:48 Geeky

嘿，canvas的寬度應該在javascript之內而不是css，因爲它可以從任何東西變成任何東西，其次有一個奇怪的問題，當我用代碼填充整個畫布（白色斑點）時：https ：//s16.postimg.org/6auq89sj9/53x.png – user7182273

CSS：

body { 
    margin:0; 
    height:100vh; 
} 
.wrapper{ 
display:table; 

    height: 100%; 
    width: 100%; 
background-color:pink; 
} 
.left{ 
display:table-cell; 
    background-color: gray; 
    height: 100%; 

} 
.right{ 
background-color: blue; 
display:table-cell; 
    height: 100%; 

} 
canvas{ 
display:table-cell; 
height: 100%; 
}

個

JS：

var WIDTH = 234; //could be anything, comes from previous calculations 
$('#canvas').css("width", WIDTH+'px'); 
$('.left').css("width", (window.innerWidth - WIDTH)/2+'px'); 
$('.right').css("width", (window.innerWidth - WIDTH)/2+'px'); 


var canvas = document.getElementById("canvas"); 
ctx = canvas.getContext("2d"); 
ctx.fillStyle = "red"; 
ctx.fillRect(0, 0, canvas.width, canvas.height);

DEMO：https://jsfiddle.net/zd75wq2e/4/

所以，基本上，你接近。我已經刪除了絕對定位和浮動，我寧願使用CSS表。我希望它在舊版瀏覽器中也有很好的支持。而且，正如評論中提到的那樣，填充問題在js的最後一行中得到了解決。

來源

2016-11-19 15:24:23 sinisake

它似乎適用於現代瀏覽器......但擁有KitKat和jellyBean的人顯示效果很差。 – user7182273

@ user7182273，對於較舊的移動瀏覽器，您可以嘗試使用浮動。但是，也可以將float添加到canvas div，而不是絕對定位... – sinisake

三的div並排導致問題

回答

相關問題