Is there a way to make three divs with fixed heights expand outside a full-width parent div, but only in terms of height, not width?
Imagine the scenario depicted in the image below:
What approach would be most effective in achieving this design?
Check out the following HTML snippet for reference:
<div class="background">
<div class="container">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</div>
Let's take this unique approach.
To achieve the desired effect, we can use transform: scaleY(1.2) on the parent .container element, and counteract the scaling by including transform: scaleY(0.8) on the child elements.
.background {
background: #000;
height: 100px;
margin: 1em 0;
}
.container {
transform: scaleY(1.2);
height: inherit;
}
.container > div {
width: 28%;
height: 100%;
background: #f88;
margin: 0 2.6666667%;
float: left;
text-align: center;
font-size: 4em;
line-height: 100px;
color: #fff;
}
.container > div > .inner {
transform: scaleY(0.8);
}<div class="background">
<div class="container">
<div class="one">
<div class="inner">1</div>
</div>
<div class="two">
<div class="inner">2</div>
</div>
<div class="three">
<div class="inner">3</div>
</div>
</div>
</div>Assuming I grasp your question correctly, one approach you could take is:
.box{
overflow-y:scroll;
overflow-x:hidden;
}
I've been looking at this snippet: The sidebar division is what I'm focusing on right now. I want the div to scroll along as I scroll down the page, but I need it to stop scrolling when its bottom is in view. The same should apply when scrollin ...
I created an HTML snippet that has the following structure: <div class="large-4 columns"> <div class="promo-box"> <a href="#"> <img src="/our-projec ...
I am currently working with Bootstrap 3 and I have a specific requirement to center a div within a cell in the container row. Most resources I found only mention how to center a div within the entire container, which is not what I am looking for. My goal i ...
I currently have the following code: .viewport { width: 300px; } .container { --color-dark: rgb(40, 40, 40); --color-light: rgb(255, 255, 255); --color-base-background: rgb(255, 255, 255); ... <div class="viewport"> <di ...
I am currently working on a website featuring moving clouds traveling across the screen from left to right. Although I have successfully implemented the animation for the clouds, there is one specific issue that has me stuck. My goal is to display some of ...
As a complete beginner in HTML and CSS, I have a question that may seem silly. Recently, I created this HTML code: * { margin: 0px; padding: 0; box-sizing: border-box; } p { font-size: 14px; font-family: 'Work Sans', 'sans seri ...
Is there a way to obtain the background height once the window has been resized? div { background-image: url(/images/somebackground.jpg); background-size: 100% 90%; background-repeat: no-repeat; width: 70%; background-size: contain; ...
Seeking to enhance user experience on my website, I have decided to implement the JQuery Category Autocomplete plugin. This will enable users to search through categorized results stored in a separate file at "/search_basic.php" (details of the file's ...
Creating a website with a dropdown menu and slider division can be tricky. When hovering over the menu, the submenu displays but causes the slider division to shift down. Does anyone have suggestions on how to fix this issue? Below is the code: <html& ...
I am attempting to align my <span class="fechar_fancy">Back/span> at the bottom of my div, regardless of the height of my content. I want this element to always be positioned at the bottom. Therefore, I tried using position:absolute and bottom:0 ...
https://i.sstatic.net/BBcJF.pngI am looking for a way to modify specific data in the local storage without affecting any other stored information. However, I have encountered an issue where editing values works correctly for the first three attempts, but ...
Currently, the code is functional but it shows both the sender and receiver messages in the same color. I would like the sender's color to be different from the receiver's message color. <?php require_once 'cn.php'; session_star ...
No matter what I try, nothing seems to be working for me. I'm looking to hide the <div id="disqus_thread"> at first and then reveal it when I click on the link "commenting", after the comments have loaded. This particular link is located at the ...
I want to customize the styling of my <Dialog> component by adding rounded corners using a border radius. Here is the inline style I am trying to apply to override the default styles of the <Dialog>: let overrideStyles = { padding: 0, marg ...
My goal is to click on each item, and the selected item should move to the top of the list and be rendered at the top. However, I encountered an issue where when clicking on an item, it moves to the top but the item that replaces it also gets checked. Bel ...
Currently, I'm developing an illustration tool that needs to be visually appealing to users, while also being accessible to screen readers and search engines. Below is the HTML code I'm working with: <span class="card">A new idea is presen ...
In my webpage, I have a drop-down menu that traditionally pushes the content below it down to make space for its items. However, I want the drop-down to overlap the contents below without affecting their position. I've tried various solutions, such a ...
The webpage features a user details table with a functionality to delete users. To remove a user, I must select the row based on the username and then click the "Delete" button. The structure of the HTML table is as follows: <table id="tblUsersGrid" ce ...
In my Python Open-CV project, I am using a matrix obtained from the library: M = cv2.getPerspectiveTransform(source_points, points) However, this matrix is quite different from the CSS Transform Matrix. Even though they have similar shapes, it seems that ...
Our application features a webgrid with a hidden reference column that is concealed using CSS. While this method works seamlessly on most browsers, we encounter an issue when it comes to printing. In our print.css file, where the column is hidden similar t ...