Setting the height of columns in a Bootstrap panel to 100%

Is there a way to achieve 100% height for all three columns even without content?

Check out this JSFiddle:

    <div class="row">
  <div class="col-md-12">
    <div class="shadow panel panel-default">
      <div class="blue white-border panel-heading">
        <h3 class="panel-title text-white">
          Contacts
        </h3>
      </div>
      <div class="panel-body">
        <div class="col-xs-3 green">1</div>
        <div class="col-xs-3 red">2</div>
        <div class="col-xs-6 black">3</div>
      </div>
    </div>
  </div>
</div>

http://jsfiddle.net/dkvf6yka/

javascriptcssangularjstwitter-bootstrap

Answer №1

One suggestion is to utilize the 'vh' unit in CSS

.col-xs-3 {
    height:100vh;
}

By using this code, you can ensure that the element's height occupies 100% of the viewport height

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

Looking for tips on resolving issues with the bootstrap navigation bar?

Check out this code snippet: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport ...

javascripthtmlcssbootstrap-4

Having trouble with the Typeahead feature in your AngularJs application?

Currently, I am experiencing an issue with my typeahead feature. Regardless of what I type, all suggestions are appearing without any filtering taking place. My intention is to have the suggestions filtered based on the initial letter typed by the user (fo ...

angularjstypeahead

Discover the potential of JavaScript's match object and unleash its power through

In the given data source, there is a key called 'isEdit' which has a boolean value. The column value in the data source matches the keys in the tempValues. After comparison, we check if the value of 'isEdit' from the data source is true ...

javascripttypescript

What is the access URL when using Angular 2's npm start command?

When I execute npm start in my angular 2 project directory, the console response includes the following lines: Access URLs: ------------------------------------ Local: http://localhost:3000 External: http://10.28.93.96:3000 ------------------------- ...

angularjsnode.jsangularnpm

Safari-exclusive: Google Maps API dynamically altering page aesthetics post-loading

Recently, I encountered a peculiar problem. Upon loading a page, the text displayed with full opacity. However, upon the Google Maps API loading after 2 seconds, the entire page's styling suddenly changed. It was as if the text on the page became less ...

javascripthtmlcssgoogle-mapsgoogle-maps-api-3

Issues with column alignment in data tables with fixed headers

While working with an angular data table, I implemented a fixed header property that code looked like this: $scope.table.dataTable($scope.gridOpts); new $.fn.dataTable.FixedHeader($scope.table); The fixed header worked well as it stayed at the top of ...

angularjsdatatablefixed-header-tables

I need help with importing CSS in Vue.js

When working with the Vue package, I have a need to import a CSS file directly into the index.html file. Currently, the 'index.html' file mounts #app > 'App.vue', which then mounts Todo.vue using the router. Any assistance on how to a ...

cssvue.jsimportrouter

Sharing stickers with Discord.js version 13

I have encountered an issue while trying to forward messages sent to my bot via DM. Everything is functioning smoothly, except for sending stickers. Whenever I attempt to send a message with a sticker, an Error DiscordAPIError: Cannot use this sticker is ...

javascriptnode.jsdiscord.js

Preserving the "height" declaration in jQuery post-Ajax request (adjusting height after dropdown selection loads product information, resetting heights of other page elements)

Looking for a way to set a height on product descriptions using jQuery? Check out the solution below: https://www.example.com/product-example Here is the code snippet that can help you achieve this feature: $(document).ready(function() { var $dscr = $ ...

javascriptjquery

Ways to disseminate arguments when dealing with an array of arrays in JavaScript

Struggling to pass an array as arguments into the join method on path in node, but hitting a roadblock: var path = require("path"); var paths = [__dirname]; var userInput = ["app", "js"]; paths.push(userInput); var target = path.join.apply(null, paths); ...

javascriptnode.js

Each div will display the same image twice when loading the image

I have a grid where images are dynamically loaded with a link to a lightbox. Currently, this is how I am achieving it: $(".selection_thumb").each( function(i) { $(this).append("<a data-lightbox='image-1' href='img/folder/folder/"+(++ ...

javascriptjqueryhtmlcssforeach

Implement a captivating hover effect on every single element within a particular class

I created a basic website with the following design: However, there is an issue with the hover effect. It only works on the specific area where the mouse pointer is located (here ipsum). My intention was for the hover effect to work on all elements. To fi ...

htmlcss

[CSS] What's the trick to getting it to smoothly glide to the top?

As a new designer, I have a question about how to make the background color extend to the top without any white space. Can someone please guide me on how to achieve this? <!DOCTYPE html> <html> <head> <style> body{ margin: 0px; p ...

cssnavbar

Transform a row into a clickable element

I am currently working on a social media platform where users can search for venues stored in the database. In my search.php file, I have implemented a text box that dynamically loads venue names from the database into a venuesearch div as the user types. ...

phpjavascriptajax

A Greasemonkey script for organizing and categorizing webpage elements

I've been working on a script to enhance the functionality of Facebook's find friends page by organizing suggested friends based on mutual connections. If you're interested in checking out the code, you can find it right here: http://pasteb ...

javascriptjqueryfacebookgreasemonkey

The dynamic addition of the active class is malfunctioning

I have dynamically added a class using AngularJS, but it seems to not be functioning correctly. As I am new to AngularJS, I would appreciate any suggestions to resolve this issue. Below is my HTML code: <div class="col-md-15 col-sm-3" ng-repeat="data i ...

jqueryhtmlcssangularjs

Ways to add elements to the DOM using jQuery from the local storage?

I'm facing a challenge where I have an input field and store the inputs in local storage. When I click on 'add', I want to immediately append the new inputs to my ul element. However, simply appending the current input won't work as it ...

javascriptjqueryappendlocal-storage

A guide on updating data dynamically in Vue.js

I am facing an issue with Vue JS in my frontend development. Here is the data for my component - data: () => ({ email: "", showError : false }), Below is the corresponding HTML code - <div v-show='showError' c ...

javascriptvue.js

Keep the first column of an HTML table fixed as you scroll horizontally

Below is an HTML table that I have created: <table id="customers" class="table table-bordered" width="100%"> <thead> <tr> <th colspan="2">Activities</th> <th>Mon 17</th> <th>Tue 18</th> </thead> ...

javascripthtmlcss

Oops, it seems like there is a TypeError with the function window.initMap in Google Maps

For the past week, I have been struggling to update my marks on Google Maps while using AJAX in an HTML page. My controller fetches data from the database and sends it back, but now I am encountering the following error: TypeError: window.initMap is not a ...

javascriptphpajaxgoogle-maps