I am looking for a way to create dynamic max-height without it being fixed. Let's imagine we have two divs on a page - if div#1 is hidden, I want the max-height of div#2 to automatically increase to occupy the maximum area before scrolling becomes necessary. The scroll should only come into play when div#2 goes out of the viewport.
Check out this sample jsbin: http://jsbin.com/voworuveqe/edit?html,css,js,output
I would appreciate CSS solutions only, no JavaScript. Thank you!
Consider implementing a method similar to the following:
function('click',{
if(show==true)
show =false;
Document.getElementById(/*element*/).style="{max-height:"/*initialHeight*/"}"
else
show =true
Document.getElementById(/*element*/).style="{max-height:"/*newHeight*/"}"});
Here's a simple example I put together using hover instead of hidden and height instead of max-height. You can easily modify it to achieve similar results.
Check out the code sample here
Keep in mind that the element you wish to modify must come after the element you want to conceal.
You won't be able to alter elements before when hovering over them, as explained in this answer: How to change parent element styling on child element hover?. If needed, consider using JavaScript even though you mentioned avoiding it in your query.
I'm currently working on creating a catalog component that will allow me to display images, titles, and descriptions multiple times. Below is the code for this component: import React from "react"; import '../pages/UI.css'; import ...
Whenever a button is clicked, the data will be pushed into an array list and stored in session storage. var data = [ 'name':"name", 'id'=1 ]; var arrayList = new Array; arrayList.push(data); sess ...
I am aiming to create a webpage where multiple divs with text and other content move along the x and y axes of the mouse. The desired effect is similar to parallax scrolling, but I have found that existing parallax plugins are image-based and do not work w ...
The date and time picker feature appears to be malfunctioning on my website. I suspect it may be due to a conflict between the full calendar and gull admin theme that I am using. I have attempted various solutions but nothing seems to be working. How can ...
When trying to apply a class to an li element during a hover event, I encountered some difficulties. Below is the code that works without the class: #leaderboard li:hover { z-index:1000; -webkit-transform: scale(3.2); -moz-transform: scale(3.2 ...
I am having trouble binding data from a dataset. Can someone review my code and point out where I may be going wrong? The current issue is that it's not binding and throwing an exception: "Both DataSource and DataSourceID are defined on 'getGridm ...
I'm currently developing a new website with PHP, and I’m facing an issue where all the URL links are directing users to 'localhost' instead of the correct IP address. This is causing a problem as they should be directed to the IP, not &apo ...
Currently, I am utilizing the most recent version of Bootstrap within an Angular environment. However, I have encountered an issue where the class "nav nav-pills nav-justified" does not stack the tabs properly when the screen size is reduced below 768px. ...
My Login page features an error message displayed within a div with specific classes. The error message is shown through a <label.../> element. However, upon the initial page load, there is no error message to display, resulting in an empty space wi ...
I'm looking for a way to capture the onclick function of a div and trigger it when the backKey is pressed. Any help would be greatly appreciated! document.addEventListener("keydown", keyDownTextField, false); function keyDownTextField(e) { var k ...
In my code, there is a DIV that holds some text. Accompanying the text is an asp:Button. When this button is clicked, I aim to access and save this particular text. Nonetheless, it seems that once the button is clicked, the content of the DIV resets - lik ...
After trying out various responsive layouts for desktops, tablets, and mobile phones, I've encountered a challenge with the current design below. Initially, I utilized a grid layout from Bootstrap, but as the width decreases, the second column shifts ...
Alright, so I've got this world map on one of my WordPress pages and here's an example of the code: <area onmousedown="modifyImage('world_map_01', './images/map/asia.jpg')" onmouseout="modifyImage('world_map_01', ...
I am having trouble creating a percentage bar using jquery and css. The code I have written is not working as expected, particularly the use of jquery css({}). Here is the code snippet: *'width' : width - seems to be causing issues for me / ...
I'm facing an issue with my code. After downloading an image that includes a canvas and a div on top of it, I noticed that the font style of the div is different from what I had specified. Below is the code for the Div: <div id="memePlaceHolder" ...
Each time I complete the entire form, the data vanishes. However, if I only input three fields, it displays properly. But as soon as I enter the last piece of data and click on display, everything gets erased. Moreover, I also require the data to be shown ...
Looking at my HTML, I have the following structure: <label class="fakeRadio active"> <input type="radio"> </label> This is the CSS style I am using: .fakeRadio input[type=radio]:checked + .fakeRadio.active { opacity:0.5; } I&a ...
I'm looking to add a special "flair" next to specific users on my WordPress website, similar to how YouTube distinguishes verified users. I have the CSS for changing the color on hover, but I need help keeping it positioned correctly. Examples from Y ...
I am facing an issue with my bootstrap drop-down menu. The main drop-down list has 3 items, each of which has a sub-list displayed on hover. However, when I hover over these items, the layout gets rearranged instead of maintaining its static appearance and ...
After successfully incorporating URL rewriting into my PHP website, I am facing an issue with displaying the links as desired. mydomain.com/komet-india/Best-Indian-Hill-Stations-1/Delhis-Hotel The elements Best-Indian-Hill-Stations,1,Delhis-Hotel in the ...