Ways to adjust the grid size so it fits perfectly on the page

I'm currently working on a small game and I'm trying to make it fit within the browser window without any scrolling necessary. The main layout includes a title section followed by a grid containing various elements, and I'd like them all to resize dynamically based on the window size.

Initially, I attempted using 

<body style="height: 100vh">
with height: 5% for the title and height: 95% for the grid. However, this led to some overflow and an unwanted scroll bar. I then experimented with height: 5vh and height: 95vh for the respective sections, but still faced similar issues.

At this point, I've run out of ideas and haven't been able to find a solution through online searches.

Below is the code snippet:

* {
  margin: 0px;
  border: 0px;
  padding: 0px;
}

body {
  background: #007acc;
}

.title {
  padding: 1%;
  margin: 1% auto;
  background: #ff9400;
  border: 4px solid black;
  border-radius: 20px;
  text-align: center;
  width: 90%;
}

.grid {
  display: grid;
  grid-template: auto auto auto auto auto / 70% 30%;
  grid-gap: 1%;
  width: 85%;
  margin: 1% auto;
}

.music {
  padding: 1%;
  background: grey;
  grid-area: 1 / 1 / span 1 / span 1;
  font-size: 30px;
}

(chat CSS styles omitted for brevity)

.share {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  grid-area: 4 / 2 / span 2 / span 1;
}

HTML structure excluded for readability.

htmlcss

Answer №1

To address this issue, consider encapsulating your code within a container and defining a grid layout with proportional heights:

  .container {
      display: grid;
      grid-template-columns: 100vw;
      grid-template-rows: auto calc(100vh - 70px);
  }

Here is the corresponding HTML:

* {
  margin: 0px;
  border: 0px;
  padding: 0px;
}

body {
  background: #007acc;
}

.container {
  display: grid;
  grid-template-columns: 100vw;
  grid-template-rows: auto calc(100vh - 70px);
}

.title {
  padding: 10px;
  margin: 10px auto;
  background: #ff9400;
  border: 4px solid black;
  border-radius: 20px;
  text-align: center;
  width: 90%;
}

.grid {
  display: grid;
  grid-template: auto auto auto auto auto / 70% 30%;
  grid-gap: 1%;
  width: 85%;
  margin: 1% auto;
}

.music {
  padding: 1%;
  background: grey;
  grid-area: 1 / 1 / span 1 / span 1;
  font-size: 30px;
}

.chat {
  padding: 1%;
  background: white;
  grid-area: 2 / 1 / span 3 / span 1;
  overflow-y: scroll;
}

.input {
  padding: 1%;
  background: gray;
  grid-area: 5 / 1 / span 1 / span 1;
  font-size: 25px;
}

.chat .name {
  color: red;
  font-weight: bold;
}

.players {
  padding: 1%;
  background: #ffbf00;
  border-radius: 20px;
  grid-area: 1 / 2 / span 3 / span 1;
  font-weight: bold;
}

.share {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  grid-area: 4 / 2 / span 2 / span 1;
}
<body>
    <div class="container">
        <div class="title">
            <h1>Guess the song</h1>
        </div>
        <div class="grid">
            <div class="music">
              music
            </div>
            <div class="players">
              <h2 style="text-align: center; color: indigo">Players:</h2>
              <p>SamFF</p>
              <p>SamFF</p>
              <p>SamFF</p>
              <p>SamFF</p>
            </div>
            <div class="chat">
              <div class="message">
                <span class="name">SamFF:</span> Hello world!
              </div>
              <div class="message">
                <span class="name">SamFF:</span> Hello world!
              </div>
              <!-- Additional messages shortened for brevity -->
            </div>
            <img class="share" src="images/share.jpg" alt="share">
            <form class="">
            <input type="text" name="" value="">
            </form>
        </div>
    </div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to place an absolutely positioned div inside a scrollable div with overflow-y: scroll

Here is the HTML code: <div class="container"> <div class="scrollable-block"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, whe ...

cssscrollpositionoverflowabsolute

Toggle the submit button using jQuery based on the comparison of the jml_automatic field with the id_km field

I recently learned jQuery last month, and now I am working on a form using jQuery to allow users to input gas requests. However, the script is not working to compare the values from #jml_km with #id_km, and the submit button is still not disabled when the ...

javascriptphphtmljquerybutton

The Zoom CSS property seems to be experiencing some issues on the Firefox browser

After researching the issue, I discovered several solutions involving css3 transition techniques. Currently, I have been using {zoom:1.5} for all of my buttons. However, this method does not work on Firefox. When attempting to implement the transition pro ...

htmlcss

What is the best way to verify all the UL elements within a hierarchy of checkboxes

Query: In my category listings, some categories have children. I am attempting to implement an "ALL" category that, when selected, will automatically check all sibling checkboxes in the same category. For example, clicking on ALL under the MUSIC category ...

jqueryhtmlcss

Flex items in the center are getting truncated when viewed on a smaller screen size

I have a group of divs in my list, here's an example: .container { display: flex; flex-direction: row; justify-content: center; } When the container is larger than the viewport upon resizing, the first/second items get clipped off. I would like ...

htmlcssflexbox

What might be causing my image element in JavaScript to be unable to load a path (src) from an array?

I'm trying to create a slideshow, but I'm having trouble getting the image element to pick up the source from a script. When I hardcode the source in the img element, it works fine. However, when I store the path in an array and try to load it us ...

javascripthtmlarraysimagesrc

What is the best way to achieve consistent alignment in Javascript?

I have been attempting to incorporate HTML code within JavaScript for alignment and styling. Despite searching on Google for 3 to 4 days, I have not found a suitable answer yet. What exactly am I looking for? Here is a snippet of my JavaScript code: funct ...

javascriptjqueryhtml

The javascript function "Scroll to the element" is not functioning properly on my website. Perhaps using JQuery will resolve the issue

I used this bootstrap template to create my website. Everything worked perfectly except for the "scroll to the element script". I kept encountering the following error: Uncaught Error: Syntax error, unrecognized expression: [href=#],[data-toggle],[data-tar ...

javascriptjqueryhtmlcsstwitter-bootstrap

An issue arising from code in Python, JavaScript, HTML, and CSS

I am currently studying JavaScript and Python and have encountered an issue with my code. I wrote a script that is supposed to create a file and input data into it, but the recv_data function is not functioning correctly - the file is not being created. Ca ...

javascriptpythonhtmlcsseel

Looking to display dropdown menus on a new line along with a text input field using jQuery?

<script type="text/javascript"> var arr = [{ val: 1, text: 'Option 1' }, { val: 2, text: 'Option 2' }]; $(function () { $('a').click(function () { var sel = $('<select>&apo ...

jquerycss

Top tips for customizing CSS styles for select control options in Chrome

I have a select box that contains various options, and I am looking to apply unique styles specifically to each option within the select control. The styles I would like to implement include: color: #333333; font-size: 14px; min-height: 2em; padding: 0px ...

htmlcss

Angular functions are executed twice upon being invoked within the html file

I decided to kick-start an Angular project, and I began by creating a simple component. However, I encountered a perplexing issue. Every time I call a function in the HTML file from the TypeScript file, it runs twice. TS: import { Component, OnInit } from ...

javascripthtmlangulartypescript

the slider HTML control is missing a value

Exploring the Range Input Type in HTML When adjusting the value on a slider (Range input type), that value is displayed in a textbox. However, making the same adjustment in the textbox does not update the slider's value. Below is the code snippet: & ...

javascripthtml

Maintain the same javascript variable throughout multiple pages

I am working on a project that involves utilizing a database along with 2 drop down menus. Through the use of JavaScript, I am able to capture the value selected from the drop down menus and then pass it on to my PHP script. The PHP script retrieves releva ...

javascriptphphtmlmysql

Tips on fetching the ID of the selected option using JavaScript without relying on jQuery

Looking to print the selected option ID using pure Javascript (not JQuery) for multiple select tags. If we have more than one select tag, how do we achieve this? <select onchange="showOptions(this)" id="my_select1"> <option value="a1" id="ida ...

javascripthtmlselect

Retrieve CSS styles from an element and all of its descendants in a recursive manner

I am looking to achieve the following functionality: getRecursiveCSS(document.getElementById('#menubar')) When called, this function should return a string of CSS for the main element and all its child elements. I have attempted the following ...

javascripthtmlcss

Is it possible that JavaScript isn't functioning properly?

My current issue involves echoing JavaScript from a PHP file to an HTML page using AJAX. Strangely, the JavaScript does not run when dynamically echoed, even though it appears in the Inspect Element tool. On the other hand, purely textual content echoes su ...

phpjavascripthtmlajax

Ensuring that Bootstrap rows fill the entire height within a column

While working on a template with nested rows and columns in Bootstrap, the layout ended up looking like this: <div class="col-5"> <div class="row"> <div class="col-3 border border-secondary">Truck Number</div> ...

javascriptcssbootstrap-4

The div is set to a position of absolute, causing the overflow-y property to be set to auto. As a

I am facing an issue with a div that has absolute positioning nested inside other divs. If you take a look at the code snippet below from http://jsfiddle.net/d8GYk/, you'll notice the styling properties applied to the div. <div style="position: ...

javascripthtmlcss

"Step-by-step guide on adding and deleting a div element with a double click

$(".sd").dblclick(function() { $(this).parent().remove(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table width="750" border="0" cellpadding="0" cellspacing="0"> <tr> <t ...

javascriptjqueryhtmlcss