Scroll within the inner container

I am currently working on creating panels, each with a header and content. My goal is to allow scrolling only within the content area. Here is the CSS I have been using:

.content-div{ 
float:left; 
height: 400px; 
overflow-x:hidden; 
overflow-y:hidden; 
white-space: nowrap; 
} 

.panel-div{ 
height:100%; 
background-color: red; 
display: inline-block; 
overflow-y:hidden; 
} 

.panel-content{ 
padding: 5px; 
height:100%; 
overflow-y:auto; 
} 

.panel-header{ 
height:100px; 
width:400px; 
text-align:right; 
padding:5px; 
background-color: blue; 
}

And here is the HTML I have been using: 

<div class="content-div"> 
<div class="panel-div"> 
<div class="panel-header"> 
</div> 
<div class="panel-content"> 
<p>test</p> 
</div> 
</div> 
</div>

My issue is that the panel-content div is taking the full height of the content-div, and I am struggling to find a solution to make it 100% of content-div while accounting for the 100px height of the header. I am aware of the calc function in CSS3, but I am interested in exploring other potential solutions. Any suggestions?

htmlcss

Answer №1

To achieve the desired result, you can modify the following code:

.content-box {
  float: left;
  height: 400px;
  white-space: nowrap;
}
.panel-box {
  height: 100%;
  background-color: red;

  /* Include the following */
  padding-top: 100px;
  box-sizing: border-box;
}
.panel-content {
  height: 100%;
  overflow-y: auto;
  padding: 5px;

  box-sizing: border-box;  /* Add this*/
}
.panel-heading {
  height: 100px;
  width: 400px;
  text-align: right;
  padding: 5px;
  background-color: blue;

  /* Include the following */
  box-sizing: border-box;
  margin-top: -100px;
}
<div class="content-box">
  <div class="panel-box">
    <div class="panel-heading">
      <p>header</p>
    </div>
    <div class="panel-content">
      <div class="padding">
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
      </div>
    </div>
  </div>
</div>

If your div is 400px, you can simply adjust the width of .panel-content to 300px and apply the scrolling there.

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

Struggling to connect HTML with CSS in Hugo

I am experimenting with a pre-fabricated theme in Hugo and incorporating some Bootstrap codes. I want to change the color of all links when displayed or hovered over. Despite searching extensively, I have been unable to achieve this through the use of CSS ...

htmlcssbootstrap-4colorshugo

Styling trick: Positioning a paragraph next to a span filled with SVG icons

I am facing an issue with the alignment of a set of SVGs contained within a <span> element appearing below a <p> element. I want the span to line up with the text 'Question 1'. Methods I have attempted: No conflicting margins or pa ...

cssalignment

Leveraging CamanJS for canvas filtering

These are my HTML elements: <div class="wrapper"> <nav class="navbar navbar-transparent"> <div class="container-fluid"> <div class="navbar-header"> <span class="btn btn-white btn-file"> ...

javascriptjqueryhtmlcanvascamanjs

Setting the maximum width for a JavaScript pop-up box

Below is the html code that creates a link reading "sacola de compras" <div> <script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script> <script type="text/javascript"> xMinicart("style=","layout=Mini") ...

javascriptjqueryhtmlioscss

Struggling to determine the expense upon button activation - data remains stagnant

My coding project involves a basic ordering system where users can input an integer, click on an update button, and see the total cost displayed below. Despite my efforts, I've encountered issues with two different methods: Using plain JavaScript for ...

javascripthtmlcss

The CSS command for displaying additional content is not functioning within table elements

I'm attempting to add a 'read more' arrow to the third column, which should expand the text in the first column when clicked. I have the following code, and it works fine outside of a table but not inside one. Where am I going wrong? I prefe ...

css

Styling for the DataTable disappears upon loading jQuery

my PHP file named "zero3data.php" <?php printf('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">'); printf('<thead>'); printf('<tr>'); ...

javascriptcss

Encountering Error 500 with Jquery Min.Map File

ERROR: GET request to http://domain.com/assets/js/jquery-1.10.2.min.map returned a 500 Internal Server Error Can anyone help me figure out what's causing this error? I checked the log files in /var/log/error but couldn't find any information. T ...

javascriptphpjqueryhtmltwitter-bootstrap

Substitute using JQuery

Hello, I am attempting to update some html using Jquery, here is my current progress. $(".old").html($(".new").html()); It's almost working. The problem is that the .new content is being copied instead of replaced. I want to Cut/Paste instead of Co ...

jqueryhtmlcssreplace

Enhancing quiz results with intricate input forms using JavaScript

I am currently working on an online quiz and the code is functioning properly. However, I would like to display the scores of each user. As a beginner in Javascript, I have been developing this quiz for a friend, and it has been a learning experience for m ...

javascriptphphtml

Having trouble with selecting checkboxes in a div using jQuery? While it may work in IE and Firefox, Chrome seems to be causing issues

In my div, I have several checkboxes placed under labels for formatting purposes. There is a list of checkbox names that need to be checked upon certain actions. Here is the list: var columns= ['2','5','4'] This is the curren ...

javascriptjqueryhtmlinternet-explorergoogle-chrome

How can I submit a form using ajax and retrieve the data as an array?

Hey there, I need some help on how to submit a form and receive data in the form of an array like this: { "notes":'some notes', "validUntil": '12/12/2015', "status": 1, "menuItemName": "HR Section", "menuItemDesc": "gggg" } Here is th ...

javascriptjqueryhtmlajax

Is it possible for Bootstrap to hide a grid column on extra small screens by setting its column width to zero?

Is there a specific Bootstrap class that allows me to hide a grid column for certain screen sizes without using media queries and the "display:none" style? ...

jquerycsstwitter-bootstraptwitter-bootstrap-3

The background-size property fails to function properly on mobile devices

It's really puzzling why this issue is happening, perhaps it's due to my fatigue. The problem lies in the fact that the "background-size" property isn't functioning on my mobile devices; however, it works perfectly when I try to simulate it ...

htmlcssmobile

What is the best method for creating a top margin that is dependent on the height of the browser?

Is there a way to make the CSS margin: top; on my HTML main_content element relative to the browser window? I want the main_content to always stay at the bottom of the browser window. How can I achieve this? I attempted the following code, but it didn&apo ...

javascripthtmlcss

Update the CSS dynamically using JavaScript or AngularJS

Is there a way to dynamically modify this CSS style using JavaScript or in an Angular framework? .ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell{ background-color: transparent; color: #0a0; } .ui-grid-cell-focus ...

javascripthtmlcssangularjs

Choose Your Preferences When the Page Loads

I have a dropdown menu where I can select multiple options at once without checkboxes. When the page loads, I want all of the options to be pre-selected by default. I am aware that I can use $(document).ready() to trigger actions after the page has load ...

javascriptjqueryhtmlevents

JSON Novice - persistently storing data in JSON during browser refreshes

My AJAX poll was set up following a guide found here: http://www.w3schools.com/php/php_ajax_poll.asp Instead of storing the poll entries from an HTML radio button in an array within a text file as demonstrated in the tutorial, I wanted to save them in a J ...

javascriptphphtmljsonajax

Encountering an error of "undefined is not iterable, cannot read property Symbol(Symbol.iterator)"

While learning React through coding, I encountered an error (Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)). I am unsure where the problem lies. Any suggestions? When utilizing useEffect to activate setFiltere ...

javascripthtmlreactjsreact-hooksuse-state

Guide on positioning a small image on top of a parent image using CSS

I have an image for a web page design, and I embedded it in an HTML file to display it. Here is the CSS code: .imageMain { position: relative; height: 100vh; /* For 100% screen height */ width: 100vw; /* For 100% screen width */ } img#homeinact ...

htmlcss