I have a unique website design in mind that involves using an image as the background and placing the content within a box. View my website design here
However, I am facing an issue with a specific page on this website. The page contains accordion buttons that expand the content beyond the boundaries of the container. My goal is to keep the container size fixed while allowing the content to overflow it.
Here is the relevant code:
CSS
.background {
background-image: url(/recources/images/page-background.png);
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 100vh;
width: 100%;
padding: 98px;
}
.web-content {
display: table;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.web-content_row {
display: table-row;
height: 100%;
}
.web-content_row .web-content_height {
overflow-y: auto;
max-height: 100%;
height: auto;
}
HTML
<body class="background">
<section class="web-content">
<div class="web-content_row web-content_height">
<header>
<!-- Header content -->
</header>
<section class="web-content_tutorials-menu">
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
</div>
<button class="accordion-button">Title</button>
<div class="panel">
</div>
</section>
</div>
<footer>
<!-- Footer content -->
</footer>
</section>
</body>
When an accordion button is clicked, the content expands beyond the page's boundaries, causing issues with the footer and container. I want the content to overflow the container without affecting its size. Additionally, the scroll bar does not appear when the content exceeds the view height.
I have tried troubleshooting this issue myself and suspect that it may be related to the display: table; and display: table-row; properties in the CSS code.
If anyone has a solution to prevent the content from expanding the footer and container, I would greatly appreciate your input.
Thank you for your understanding as this website has a unique design that poses challenges not commonly encountered.
Sincerely,
Hexsphere