Advice needed: Flexible element layout with CSS and JS

Other Questions JavaScript
1

Hey everyone! I’m stuck trying to create a flexible layout for a schedule-like display. Here’s what I’m aiming for:

  • A main container that fills the browser window, minus a footer and small margins
  • Sub-elements inside this container, positioned absolutely
  • The container should adjust its size based on the window and footer

I’ve tried playing around with CSS positioning and some JavaScript, but I’m not getting anywhere. The container isn’t expanding properly, and I’m losing scroll bars due to absolute positioning.

Has anyone tackled something similar before? I’m wondering if I should ditch this approach and use HTML tables instead, or even consider a Java applet. Any tips on how to achieve this flexible layout would be super helpful!

Here’s a basic example of what I’ve tried:

.container {
  position: relative;
  width: 100%;
  height: calc(100vh - 50px); /* Assuming 50px footer */
}

.sub-element {
  position: absolute;
  /* Other styling */
}

window.onload = function() {
  const container = document.querySelector('.container');
  // Attempted to adjust size here, but no luck
}

What am I missing? Thanks in advance for any advice!

2

hey dave, have u tried using css grid? it’s pretty sweet for this kinda stuff. u can do something like:

.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
height: calc(100vh - 50px);
gap: 10px;
overflow: auto;
}

this’ll give u a flexible layout that adjusts to the screen size. no need for js or absolute positioning. hope this helps!

3

I’ve faced similar challenges with flexible layouts, and I can share what worked for me. Instead of absolute positioning, I’d recommend using CSS Grid or Flexbox for the main container. These modern layout systems are perfect for creating responsive, adaptable layouts.

For your specific case, CSS Grid might be the better choice. You can create a grid container that automatically adjusts to the viewport size, minus the footer. Here’s a basic approach:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  height: calc(100vh - 50px);
  overflow: auto;
}

.sub-element {
  /* Grid item styles */
}

This setup allows the sub-elements to flow naturally within the grid, adapting to different screen sizes. You can adjust the minmax values to control the size of your sub-elements.

As for the JavaScript, you might not need much. Just a simple resize listener to recalculate the container height if your footer size changes:

window.addEventListener('resize', () => {
  const container = document.querySelector('.container');
  container.style.height = `calc(100vh - ${document.querySelector('footer').offsetHeight}px)`;
});

This approach has worked well for me in creating flexible, responsive layouts without the headaches of absolute positioning. Give it a try and see if it solves your issues!

4

Having worked on similar projects, I’d suggest considering a CSS Flexbox approach for your layout. It’s more modern and flexible than tables or Java applets. Here’s a simplified example:

.container {
  display: flex;
  flex-wrap: wrap;
  height: calc(100vh - 50px);
  overflow: auto;
}

.sub-element {
  flex: 0 0 auto;
  /* Set width and height as needed */
}

This setup allows sub-elements to flow naturally within the container, adjusting to different screen sizes. You can fine-tune the flex properties to control how elements behave.

For the JavaScript part, you might only need a simple resize listener to recalculate the container height if your footer size changes. This approach has served me well in creating responsive layouts without the complexities of absolute positioning.