How to extract CSS 100% from a specific div and not the entire webpage

Question

How to extract CSS 100% from a specific div and not the entire webpage

Struggling with calculating using calc in CSS led me to discover that my current div is showing an incorrect 100% value.

Check out this brief example:

html, body, .calender {
position: relative;
height: 100%;
overflow: hidden;
}

.appointmentsA {
background: blue;
}

.appointmentsB {
background: red;
}

.calender {
display: table;
width: 100%;
table-layout: fixed;
padding: 10px 10px 0 10px;
}
.calender .row {
display: table-cell;
padding: 0 10px;
}

.appointments {
height: 100%;
}

.appointments:before {
content: "test";
position: absolute;
top: calc(100% - 18px);
color: #fff;
}

<main class="calender">
<div class="row">
<h1 class="title">ABC</h1>
<div class="appointments appointmentsA"></div>
</div>
<div class="row">
<h1 class="title">DEF</h1>
<div class="appointments appointmentsB"></div>
</div>
</main>

The colored blocks of red and blue match the height of the container row and its main parent element.

Is there a way to achieve the true 100% height of these colored blocks without using JavaScript? If we can accurately set the colored block height to 100%, then the ":after" element will display correctly instead of cutting off text.

Example Image: example

css height

Answer 1

Answer №1

Are you looking to apply a color to the full-height column? If so, you can achieve this by adding position: absolute to the title:

* {
  box-sizing: border-box;
}

html,
body,
.calender {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.appointmentsA {
  background: blue;
}

.appointmentsB {
  background: red;
}

.calender {
  display: table;
  width: 100%;
  table-layout: fixed;
  padding: 10px 10px 0 10px;
}

.calender .row {
  display: table-cell;
  padding: 0 10px;
}

.appointments {
  height: 100%;
}

.title {
  position: absolute;
}

<main class="calender">
  <div class="row">
    <h1 class="title">ABC</h1>
    <div class="appointments appointmentsA"></div>
  </div>
  <div class="row">
    <h1 class="title">DEF</h1>
    <div class="appointments appointmentsB"></div>
  </div>
</main>

Alternatively, for a colored division:

* {
  box-sizing: border-box;
}

html,
body,
.calender {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.appointmentsA {
  background: blue;
}

.appointmentsB {
  background: red;
}

.calender {
  display: table;
  width: 100%;
  table-layout: fixed;
  padding: 10px 10px 0 10px;
}

.calender .row {
  display: table-cell;
  padding: 0 10px;
  position: relative;
}

.appointments {
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.title {
  position: relative;
  z-index: 2;
}

<main class="calender">
  <div class="row">
    <h1 class="title">ABC</h1>
    <div class="appointments appointmentsA"></div>
  </div>
  <div class="row">
    <h1 class="title">DEF</h1>
    <div class="appointments appointmentsB"></div>
  </div>
</main>

Answer 2

Are you looking to apply a color to the full-height column? If so, you can achieve this by adding position: absolute to the title:

* {
  box-sizing: border-box;
}

html,
body,
.calender {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.appointmentsA {
  background: blue;
}

.appointmentsB {
  background: red;
}

.calender {
  display: table;
  width: 100%;
  table-layout: fixed;
  padding: 10px 10px 0 10px;
}

.calender .row {
  display: table-cell;
  padding: 0 10px;
}

.appointments {
  height: 100%;
}

.title {
  position: absolute;
}

<main class="calender">
  <div class="row">
    <h1 class="title">ABC</h1>
    <div class="appointments appointmentsA"></div>
  </div>
  <div class="row">
    <h1 class="title">DEF</h1>
    <div class="appointments appointmentsB"></div>
  </div>
</main>

Alternatively, for a colored division:

* {
  box-sizing: border-box;
}

html,
body,
.calender {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.appointmentsA {
  background: blue;
}

.appointmentsB {
  background: red;
}

.calender {
  display: table;
  width: 100%;
  table-layout: fixed;
  padding: 10px 10px 0 10px;
}

.calender .row {
  display: table-cell;
  padding: 0 10px;
  position: relative;
}

.appointments {
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.title {
  position: relative;
  z-index: 2;
}

<main class="calender">
  <div class="row">
    <h1 class="title">ABC</h1>
    <div class="appointments appointmentsA"></div>
  </div>
  <div class="row">
    <h1 class="title">DEF</h1>
    <div class="appointments appointmentsB"></div>
  </div>
</main>

Answer 3

Answer №2

It seems like I've grasped your point correctly.

h1 is considered a block level element in the structure. The divs .appointments are positioned after it. One approach is to assign the background-color of the h1 to match the corresponding .appointment and eliminate the bottom margin. Alternatively, you can enclose the h1 within appointment, as illustrated in the code snippet below.

html,
body,
.calender {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.appointmentsA {
  background: blue;
}

.appointmentsB {
  background: red;
}

.calender {
  display: table;
  width: 100%;
  table-layout: fixed;
  padding: 10px 10px 0 10px;
}

.calender .row {
  display: table-cell;
  padding: 0 10px;
}

.appointments {
  height: 100%;
}

<main class="calender">
  <div class="row">
    <div class="appointments appointmentsA">
      <h1 class="title">ABC</h1>
    </div>
  </div>
  <div class="row">
    <div class="appointments appointmentsB">
      <h1 class="title">DEF</h1>
    </div>
  </div>
</main>

Answer 4

It seems like I've grasped your point correctly.

h1 is considered a block level element in the structure. The divs .appointments are positioned after it. One approach is to assign the background-color of the h1 to match the corresponding .appointment and eliminate the bottom margin. Alternatively, you can enclose the h1 within appointment, as illustrated in the code snippet below.

html,
body,
.calender {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.appointmentsA {
  background: blue;
}

.appointmentsB {
  background: red;
}

.calender {
  display: table;
  width: 100%;
  table-layout: fixed;
  padding: 10px 10px 0 10px;
}

.calender .row {
  display: table-cell;
  padding: 0 10px;
}

.appointments {
  height: 100%;
}

<main class="calender">
  <div class="row">
    <div class="appointments appointmentsA">
      <h1 class="title">ABC</h1>
    </div>
  </div>
  <div class="row">
    <div class="appointments appointmentsB">
      <h1 class="title">DEF</h1>
    </div>
  </div>
</main>

How to extract CSS 100% from a specific div and not the entire webpage

Answer №1

Answer №2

Similar questions

Utilizing Tailwind CSS for Advanced DIV Placement

Center text in the v-text-field label

Personalizing Web Push Alerts (Google Chrome)

CSS: Creating a dynamic layout to center the card on screens of all sizes

What is the best way to center align a Bootstrap 4 modal window?

To accurately determine the width of a div element, it is essential to include the web browser width in the CSS

Swap out the current image for a different one

How can I locate and modify a particular cell within an HTML table using just JavaScript?

What's the best way to restrict characters in a paragraph?

React.js query: Image caught in a loop, highlighting a specific section

Creating a sleek horizontal scrolling list with the least amount of rows using tailwindcss

HTML list with padding

Addressing the issue of reversed keyboard navigation order for radio buttons caused by the flex-direction styling

React css modules to enhance styling in your web project

What is the best way to efficiently pass a prop from a Parent styled component to its children's styled components, regardless of how deeply nested they are?

Vertically align the text

How can I align a fixed-width div beside a floating div that is in percentage?

What is the best way to create scrollable content inside a container?

JavaScript is unable to identify the variable containing parsed JSON

Setting the row property of a frameset using CSS: a step-by-step guide