Creating a BorderContainer layout with dual regions: A step-by-step guide

I am struggling with adjusting the size of the "Center pane" to fit the screen (100%). Despite trying various methods, I have not been successful in achieving the desired outcome. Can someone please point out what I am doing wrong and how can I fix it?

http://jsfiddle.net/m8112z2b/

  <div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%" id="xxx-dijit-layout-app">
        <div data-dojo-type="dijit/layout/ContentPane data-dojo-props=" region:'top'" id="xxx-dijit-layout-control">Top pane</div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" id="xxx-dijit-layout-workspace">Center pane</div>
    </div>

        #xxx-dijit-layout-app {
            width: 100%;
            height: 100%;
        }

        #xxx-dijit-layout-control {
            height: 100px;
            background-color: red;
        }

        #xxx-dijit-layout-workspace {
            height: 100%;
            background-color: yellow;
        }
htmlcssdojodijit.layout

Answer №1

When it comes to HTML, the height is determined by the content within it. To make sure that your <html> and <body> elements take up 100% of the screen by default, you'll need to add this CSS:

html, body {
  height: 100%;
}

By setting the height of these elements to 100%, the center pane will fill the entire screen. This means that the screen will be 100% height plus an additional 100px for the top pane. If you want the center pane to take up the remaining space after the top pane, you can use the following CSS:

#xxx-dijit-layout-workspace {
  height: calc(100% - 100px);
  background-color: yellow;
}

Check out this example on JSFiddle: http://jsfiddle.net/at38eh7g/

Answer №2

Simply include the following code in your CSS:

html,body{

 height:100%;
margin:0;
padding:0;
}

It appears that you have neglected to specify a height for both your body and html elements.

Answer №3

Give this a shot

body {
   padding: 10px;
}

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

Customize the appearance of every other column in an asp gridview

Looking for help with formatting rows and columns in an ASP GridView. The rows are automatically colored alternating, and I want to make the content in every first column bold and every second column normal. I have heard about using CSS nth-child() to achi ...

c#javascriptjqueryasp.netcss

What is the best way to incorporate multiple borders at the bottom of a design

I am looking to enhance the appearance of a div by adding two extra bottom borders, similar to the image provided: Would it be necessary for me to insert two additional empty divs in order to achieve this? My current markup is very basic: <div class=" ...

htmlcss

Accessing the data from an HTML5 slider using JQuery

Having some difficulty fetching a value from an HTML5 slider using JQuery. Here is my code snippet: JQuery Code: // Getting the value from slider one $("#submit").on("click", function(evt) { var sliderValue = $('#slider01').attr('value ...

javascriptjqueryhtml

Tips on how to personalize the print layout of an Angular 4 page when pressing ctrl+p

I am working on an angular4 app and I encountered an issue when trying to customize the print page view by pressing ctrl+p in the browser. The page that needs to be printed contains only Angular components, and my attempts to modify the print view using ...

angularcssangular5

Learn how to incorporate an image into your Codepen project using Dropbox and Javascript, along with a step-by-step guide on having the picture's name announced when shown on the screen

Hey there, I'm in need of some assistance. I have a Codepen page where I am working on displaying 4 random shapes (Square, Triangle, Circle, and Cross) one at a time, with the computer speaking the name of each shape when clicked. I want to pull these ...

javascripthtmlimagedropboxcodepen

Seamless border that flows through several elements

I'm currently working on integrating line numbers into a code snippet. I've managed to get it functioning, but there's an issue with the border between the line number and the code. Instead of being continuous, there are small, unsightly gap ...

cssborderline-numberscss-counter

Exploring ways to loop through a JSON array and embed it into an HTML element

After the ajax request, the data returned is structured as follows: Data = [ ["18/02/2019", "A"], ["19/03/2019", "B"], ["21/05/2019", "C"], ] The ajax request was successful and the data is stored in a variable named Data within a function. ...

javascripthtmlcssjsonajax

I need help getting rid of the unwanted text and objects that are appearing on my website

I recently designed a basic website and everything was running smoothly until I decided to insert a new ul division in the HTML page as a spacer between two elements: <div> <ul> <li><a></a></li> </u ...

htmlcss

Interact with various contenteditable sections by navigating with the arrow keys

I have a challenge with multiple <p contenteditable="true"></p> elements on my page. I am seeking a solution to enable the use of arrow keys to navigate seamlessly across these separate elements as if they were one cohesive editable element. F ...

javascripthtmlcontenteditable

Managing Custom CSS Files in Sencha Touch 2 Production Build

Currently, I am in the process of working on a mobile website using Sencha Touch 2. To develop the production build, I utilized Sencha Cmd v3. Upon testing the production version, I noticed that although my custom CSS files are present in the folder struct ...

htmlcssextjssencha-touchsencha-touch-2

Ways to show dynamic text according to slider adjustments

I am struggling with adding an if condition to my form that includes a horizontal slider. My goal is to display text based on the position of the slider. Can someone offer some guidance on this, please? Here's my HTML code snippet: <form method=" ...

javascriptjqueryhtml

Does the order property in flex have a specific starting and ending point?

I am curious to know if there are specific start or end numbers for ordering elements within a flex container. For instance: .firstOrder { order: <First-Item> } Why do I ask? Well, I am in the process of developing a CSS framework and I would l ...

cssflexbox

Resolving undefined errors in Angular 2 while attempting to focus on an input field with @ViewChild declaration

Upon loading my view, I typically set focus to an input field using the following method: ngAfterViewInit() { this.focusInput.nativeElement.focus(); } Everything works fine when calling it within ngAfterViewInit(). However, when attempt ...

htmlangular

Checking for Files without Compiling: A guide to using Webpack 2

I have a scenario where I am importing several .css files from npm modules in my main.js file, which serves as the entry point for my webpack configuration. Here is an example of how it's set up: "use strict"; const ExtractTextPlugin = require("extra ...

javascriptcssnode.jstwitter-bootstrapwebpack

Thickness of Border in Bootstrap Cards

I've been attempting to include a thicker border around the entirety of my Bootstrap 4 card. Despite specifying a thicker border, nothing seems to change. Below is a snippet of the code I'm working with: <div class="container"> <di ...

cssbootstrap-4

Angular 2's subscribe method allows for actions to be taken in response to

There are two buttons, one of which is hidden and of type file. When the user clicks the first button, a confirmation dialog opens. Upon clicking "Ok" in the dialog, the second button should be clicked. The issue arises when all the logic in the subscribe ...

htmlangulartypescript

Having trouble concealing images in HTML Emails on Outlook 2013

Struggling to properly hide images in Outlook 2013? Even when hidden, they are leaving a line of spacing that stretches the email. Here's the code I'm using to hide an image from the desktop version: <tr style="display: none; line-height: 0; ...

htmloutlookgmailhtml-email

Guide to Setting the Color of a Link Using CSS

I’ve been attempting to change the color of an ALink using CSS, but it seems like I just can’t get it right. It’s clear that I’m missing something, as I’ve spent quite a bit of time tinkering with this seemingly simple issue and still can’t fi ...

htmlcss

Generating containers in Angular using *ngFor

As a beginner in Angular, Bootstrap, and front-end programming, I am looking to create multiple boxes that reveal detailed information when clicked. This is the desired outcome: https://i.sstatic.net/Ak0eA.png After clicking on box number 1: https://i.s ...

htmlcssangulartwitter-bootstrap

Permit users to access downloads upon authorization

Hey there, just a quick question. I'm in the process of building a website that stores files and allows users to purchase and download them. The issue I'm facing is that the file directory is protected with .htaccess permissions to prevent unauth ...

phphtmlsecurityauthenticationweb