Expand a section of the webpage to fill the entire screen

I'm working with some HTML code that looks like this:

<header>title</header>

<content class="container-fluid">
  <div class="row">
    <div class="col-sm-3 leftside">
      <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
      </ul>
    </div>
    <div class="col-sm-9">
      <div id="map"></div>
    </div>
  </div>
</content>

<footer>footer</footer>

My goal is to display the content section on one monitor screen.

The Google map needs to be full screen and responsive.

Also, the side menu should be full screen with a scroll option for more rows in its columns.

How can I achieve this?

See demo code sample

EDIT:

When I view the page in a browser, I want the header and content to be displayed in full screen, with the footer accessible via scrolling.

htmltwitter-bootstrapcssresponsive-design

Answer №1

Here is the solution you were looking for. Check out the code snippet below. You can also find it here on JSFiddle, and it's free from any Google Maps API errors.

If you spend just 5 minutes going through the Bootstrap documentation here at getbootstrap.com, you'll be well on your way to understanding their components with ease.

var settingsItemsMap = {
  zoom: 12,
  center: new google.maps.LatLng(40.768516981, -73.96927308),
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE
  },
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), settingsItemsMap);

var myMarker = new google.maps.Marker({
  position: new google.maps.LatLng(40.768516981, -73.96927308),
  draggable: true
});

map.setCenter(myMarker.position);
myMarker.setMap(map);
nav {
  background: red;
  color: #fff;
}

.sidebar {
  position: fixed;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  padding: 20px 0;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid #eee;
  background: lightblue;
}

main.col-sm-9.ml-sm-auto.col-md-10 {
  padding: 0;
}

section.content {
  padding: 2em;
  height: 100vh;
}

#map {
  height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<header>
  <nav class="navbar fixed-top">
    <a class="navbar-brand">
      Title
    </a>
  </nav>
</header>

<div class="container-fluid">
  <div class="row">
    <nav class="col-sm-3 col-md-2 sidebar">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Menu 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu 3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">...</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">...</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">...</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">...</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">...</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">...</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">...</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">...</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu Last</a>
        </li>
      </ul>
    </nav>

    <main role="main" class="col-sm-9 ml-sm-auto col-md-10">
      <section class="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ante quam, accumsan vitae augue ut, pharetra placerat ligula. Nam sed lorem augue. Donec ipsum velit, mattis sit amet nibh eu, ultrices porta nulla. In dictum ex ligula, eu efficitur metus
          pretium et. Aliquam convallis dictum justo in imperdiet. Praesent tincidunt orci et fringilla consequat. Fusce convallis, dolor in mollis gravida, leo risus hendrerit magna, id sagittis nisl tellus quis ex. Mauris rutrum aliquam eleifend. Nullam
          dignissim dictum rutrum. Nam tristique mattis nunc nec pretium. Ut at maximus nibh. Donec vel semper sapien, eget semper neque. Maecenas felis magna, condimentum ac ipsum vitae, auctor egestas massa. Nunc vulputate accumsan sem et vehicula.
          Nulla ac lorem congue tortor pharetra feugiat. Curabitur lacinia, nisl quis vestibulum convallis, lorem lectus bibendum elit, sed finibus sapien tortor a orci.
        </p>
      </section>
      <section>
        <div id="map"></div>
      </section>

    </main>
  </div>
</div>

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

Steps for Adding an H1 Tag Using GWT

Forgive me for what may be a silly question, but I'm truly struggling to understand how to dynamically add an HTML heading tag to my page using the Google Web Toolkit. My motivation is not related to styling purposes, as any label can be styled. Inst ...

htmljquery-uigwt

I am encountering a 'Cannot GET /index.html' error when running my Node.js and Express application, even though I do not have an index.html file

I'm puzzled by the error I'm encountering. Everything runs smoothly on my local machine, but when I try running it on Linux, this error pops up. I've already created ejs files and included all necessary components. Additionally, there is no ...

htmlnode.jslinuxexpressejs

Smoothly scroll to the bottom of a dynamically updated div using native JavaScript

I am in the process of developing a chat application and my goal is to achieve a smooth scrolling animation that automatically moves the page down to the bottom of the div when dynamic messages are loaded. <ul id="messages"> <li ...

javascripthtmlanimationscrollnative

Modifying the color of a GIF animated image using CSS

I'm currently working on an Angular application and I have a transparent GIF Loader image that I downloaded. I've been trying to figure out how to change the color of the GIF image, but so far, I've only been successful in resizing it. I sea ...

htmlcssangular

Is there a way to generate a modal list of values by utilizing bootstrap and angular, while incorporating spring boot as the backend technology?

I'm working on developing a generic "List of Values" feature, which will be a searchable modal containing a natural identifier and description. I have successfully built an AngularJS application in Spring Boot to accomplish this task, but unfortunatel ...

javascriptangularjstwitter-bootstrap

What is the best way to extract plain text with JQuery?

I found this Html code snippet: <div class="form-group row"> <label id="lb_size" class="col-lg-3 col-form-label"> <span class="must-have">****</span> Size </label> </div> My goal is to ext ...

javascriptjqueryhtml

Exploring the Possibilities of Greensock within Meteor Templates

Attempting to add animation to a div within a Meteor template using TweenLite with the gsop package installed. The template html code: <template name="mainInit"> <div id="teaContainer"> <h1>Tea</h1> </div> </template& ...

javascripttwitter-bootstrapmeteortweengsap

How can I select a specific value within an Autocomplete bar by clicking on it in the div ul li strong

I have a multitude of li tags nested under both div and ul. Each li tag contains a strong element: <div style="width:380px" id="autoComplete" class="suggest fl"> <div class="sWrap"> <div class="iconWrap"> <span ...

javahtmlseleniumxpathselenium-webdriver

Pressing a button triggers the highlighting of a tab in HTML through the use of Javascript

In the corner of my webpage, I have three tabs: info, question, order. When I click on one tab header, only that tab should highlight. The info section includes two buttons that link to the question and order tabs. When these buttons are pressed, the respe ...

javascriptjqueryhtmlcss

Determining if a URL links to an image when the file extension is not informative

I am currently working on building an AJAX call to retrieve data from an API with a messy data structure. The challenge I'm facing is that the array returned by each AJAX call can contain up to 30 elements, some of which have image URLs without a file ...

javascripthtml

Adjust the Bootstrap settings to center the title on the navbar and shift the logout button to the right side

Is there a way to centrally align the title "My project" in the navbar while also keeping the logout button on the right of the same line as the title? <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="contain ...

htmlcsstwitter-bootstrap

Issue with FullPageJS: scrollOverflow feature not functioning upon click event

I am currently working on a Fullpage.js instance that needs to be initialized with a click event and then destroyed when switching to another page, and vice versa. The scrollOverflow feature works perfectly as long as the #fullpage element is not hidden up ...

javascriptjquerycssfullpage.js

Creating a unified border style for both <p> and <ul> tags in HTML5

Is there a way to have both paragraphs and unordered lists contained within the same border? I initially thought I could achieve this by placing the list inside the paragraph tag, but that does not seem to work. Below is a snippet of my external style sh ...

csshtml

Retrieve data from a text file using ajax and then return the string to an HTML document

Just starting out with ajax, I have a text file containing number values For example, in ids.txt, 12345 maps to 54321 12345,54321 23456,65432 34567,76543 45678,87654 56789,98765 Here is the Html code snippet I am using <html><body> < ...

javascriptjqueryhtmlajax

Applying CSS classes to a custom AngularJS directive: A step-by-step guide

Need to have a CSS class called tab for the nav HTML element, which will be used as a directive: <nav tab></nav> The expected interpretation is: <nav class="tab"> <a></a> <a></a> <a></a> ...

javascripthtmlcssangularjsangularjs-directive

I'm attempting to make the button hover color transparent, but unfortunately, it's not having any effect

Check out the code snippet below. I'm attempting to adjust the button hover color to transparent. The div class is "button_container" while the button class is "btn". I made changes to the color initially, but it doesn't seem to be working. Any a ...

htmlcsswordpresshover

What is the best way to adjust the position of a dropdown menu in Material UI?

I am currently working on a Gatsby application and I'm trying to achieve a dropdown menu effect when the Menu icon is clicked, with the menu appearing right under the header and expanding to 100% width. Below is the code snippet that I have been using ...

cssreactjsdrop-down-menumaterial-uigatsby

Utilizing JavaScript and jQuery libraries in conjunction with periods

I am a bit puzzled about when to include the period before referencing class names. For instance, in this code snippet, why is a period included before the first use of the 'active-slide' class but not for the other two instances? var primary = ...

javascriptjqueryhtmlcss

What is the best way to add a dropdown menu in front of a button?

I have a div containing a dropdown list of items and I want the user to be able to add more dropdown lists by clicking a button. Although I managed to do this, the issue I'm encountering is that the new list gets added after the button instead of ben ...

javascriptjqueryhtmldom

Tips for getting the DIV:hover effect to work in Internet Explorer 8

Can someone provide me with the steps to get DIV:Hover functioning in Internet Explorer 8? ...

htmlcss