Giving maximum height and width equally to canvas in HTML/CSS

Question

I am trying to set a layout for my web app. I want to have 2 canvases to fill most of the window and 4 image buttons at the bottom. Here is what I am trying to achieve:

But I get it all screwed in the browser. The canvas are small! No matter what I put as height or width of the dives or the canvas itself in the CSS file. I want them to be be ideally 800x600 and resize with the same ratio if the window is being resized.

Here are my HTML and CSS:

body {
  margin: 0;
}

header {
  margin: 0;
  background-color: #DC0A2F;
  height: 50px;
}

header img.logo {
  width: 150px;
  height: auto;
  padding: 13px 13px 0px 13px;
}

header a {
  color: white;
  text-decoration: none;
  float: right;
  padding: 15px;
  font-family: Consolas;
  font-weight: revert;
}

header a:hover {
  padding-top: 16px;
}

html,
body {
  height: 100%;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

main.index {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #888888;
}

main img.menu {
  width: 250px;
  height: auto;
  padding: 50px;
}

table {
  font-size: 130%;
}

th {
  background-color: #888888;
  border-color: white;
}

td {
  background-color: white;
  border-bottom: solid 1px #888888;
  border-right: solid 1px #888888;
}

img.index {
  width: 400px;
  height: auto;
}

.ergebniss {
  margin: 50px;
}

svg.header {
  width: 125px;
  height: 30px;
  margin-top: 10px;
}

.vorschau {
  margin: 100px;
}

canvas{ border: 1px solid black; background-color: red;}

.footPreviewContainer {
  height: 800px;
  text-align: center;
}

#previewWrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: auto;
  background-color: antiquewhite;
}

#previewWrapper div {
  display: table-cell;
  height: auto;
}

#leftCanvas #rightCanvas {
  height: 800px;
  width: 600px;
  border: 1px solid #cccccc;
  background-color: #DC0A2F;
}

.previewButtons {
  text-align: center;
}




  WebSocket Echo Client
  



  
  
    
    Herunterfahren
    Neustart

user_13762301 · Answer

The easiest solution is to use display:flex; on the preview container and set the height using vh (view height) units. The defaults will cause the children canvases to stretch to fill the height, and you can then choose how to align them. They are set to justify-content: space-around; in the below snippet which evenly divides any free space on both sides of the children elements.

#previewWrapper {
  height: 85vh;
  display: flex;
  justify-content:space-around;
}

canvas {
  width: 46vw;
}

body {
  margin: 0;
}

header {
  margin: 0;
  background-color: #DC0A2F;
  height: 50px;
}

header img.logo {
  width: 150px;
  height: auto;
  padding: 13px 13px 0px 13px;
}

header a {
  color: white;
  text-decoration: none;
  float: right;
  padding: 15px;
  font-family: Consolas;
  font-weight: revert;
}

header a:hover {
  padding-top: 16px;
}

html,
body {
  height: 100%;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

main.index {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #888888;
}

main img.menu {
  width: 250px;
  height: auto;
  padding: 50px;
}

table {
  font-size: 130%;
}

th {
  background-color: #888888;
  border-color: white;
}

td {
  background-color: white;
  border-bottom: solid 1px #888888;
  border-right: solid 1px #888888;
}

img.index {
  width: 400px;
  height: auto;
}

.ergebniss {
  margin: 50px;
}

svg.header {
  width: 125px;
  height: 30px;
  margin-top: 10px;
}

.vorschau {
  margin: 100px;
}

canvas{ border: 1px solid black; background-color: red;}

.footPreviewContainer {
  height: 800px;
  text-align: center;
}

#previewWrapper {
  height: 85vh;
  display: flex;
  justify-content:space-around;
}

canvas {
  width: 46vw;
 }




  WebSocket Echo Client
  



  
  
    
    Herunterfahren
    Neustart

user_11044542 · Answer

You only have to add a bit css. I add it directly to style inline, like this you can fix it easily

The first thing is to fix the height of the previewWrapper. And then width in for the canvas.

body {
  margin: 0;
}

header {
  margin: 0;
  background-color: #DC0A2F;
  height: 50px;
}

header img.logo {
  width: 150px;
  height: auto;
  padding: 13px 13px 0px 13px;
}

header a {
  color: white;
  text-decoration: none;
  float: right;
  padding: 15px;
  font-family: Consolas;
  font-weight: revert;
}

header a:hover {
  padding-top: 16px;
}

html,
body {
  height: 100%;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

main.index {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #888888;
}

main img.menu {
  width: 250px;
  height: auto;
  padding: 50px;
}

table {
  font-size: 130%;
}

th {
  background-color: #888888;
  border-color: white;
}

td {
  background-color: white;
  border-bottom: solid 1px #888888;
  border-right: solid 1px #888888;
}

img.index {
  width: 400px;
  height: auto;
}

.ergebniss {
  margin: 50px;
}

svg.header {
  width: 125px;
  height: 30px;
  margin-top: 10px;
}

.vorschau {
  margin: 100px;
}

canvas{ border: 1px solid black; background-color: red;}

.footPreviewContainer {
  height: 800px;
  text-align: center;
}

#previewWrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: auto;
  background-color: antiquewhite;
}

#previewWrapper div {
  display: table-cell;
  height: auto;
}

#leftCanvas #rightCanvas {
  height: 800px;
  width: 600px;
  border: 1px solid #cccccc;
  background-color: #DC0A2F;
}

.previewButtons {
  text-align: center;
}




  WebSocket Echo Client
  



  
  
    
    Herunterfahren
    Neustart

Giving maximum height and width equally to canvas in HTML/CSS

2 Answers