I need my styled component to make sure my inner div spans the entire width of its parent div

I'm having an issue with my NavDiv styled component not taking up the full height of my Wrapper styled component. I've tried setting the height using different units like percentage, em, rem, but it doesn't seem to work. It only works when using the px unit.

const Wrapper = styled.div`
    min-width: 100vw;
    min-height: 100vh;
`

const NavDiv = styled.div`
    border: 1px solid blue;
    position: relative;
    width: 100%; 
    height: 100%;
    font-size: 1rem;
    padding: 4em 2em;
`

App Component

const App = () => {
        return (
            <Wrapper>
                <Navbar></Navbar>
            </Wrapper>
        )
    }

NavBar component

const Navbar = props => {
    return (
        <NavDiv>
            
        </NavDiv>
    )
}

Answer №1

It's not a problem with styled-components, but rather a css issue. The property height: 100% will not work unless the parent also has a height property, and using min-height doesn't solve the problem.

.wrapper {
    min-width: 100vw;
    height: 100vh; /* Instead of min-height */
}

.nav-div {
    border: 1px solid blue;
    position: relative;
    width: 100%; 
    height: 100%;
    font-size: 1rem;
    padding: 4em 2em;
}
<div class=wrapper><div class=nav-div></div></div>

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

The image fails to display correctly

As I work on creating a basic webpage in HTML and JavaScript, my goal is to validate certain parameters (such as width, height) of an image that users upload via a form. In JavaScript, I extract the file from the form and attempt to display it as an image ...

Ways to include additional bars in your Animated jQuery, CSS, and HTML Bar Graph

I found this awesome website that explains how to create an animated bar graph using HTML, CSS, and JQuery. I want to implement it in my web application to display monthly statistics for each of the 7 divisions in my company. However, I'm having troub ...

JavaScript incorporates input range sliding, causing a freeze when the mouse slides rapidly

Currently working on a custom slider and encountering an issue. When quickly moving the mouse outside the slider's range horizontally, exceeding its width, the slider doesn't smoothly transition to minimum or maximum values. Instead, there seems ...

Easier JavaScript for numerous HTML elements

I am an aspiring JavaScript learner seeking advice. Currently, I am working on a website that features numerous items with multiple images for each. I am utilizing JQuery to display a larger image when the user hovers over a thumbnail image. My query is ...

Find a specific row in a table using jQuery without requiring any input from the

I want to create a search function that filters results in a table based on user input. The script I have currently works but I need it to only search the first column without requiring the user to click an input field. I want the default value to load whe ...

Javascript Dependencies Are Failing to Load with Ajax

My index.php file has the functionality to load content based on a $_GET variable. Here's how it works... <?php $problem_id = $_GET['problem_id']; include('include/' . $problem_id . '.php'); ?> For example, ...

Tips for preventing a bootstrap card image from overflowing in the card-body

I'm currently working with bootstrap cards and I've been able to prevent the card image from overflowing outside of the card area. However, I'm facing an issue where the bottom of the image overflows into the card-body region. I'm not s ...

Creating a live streaming application - A step-by-step guide

I am embarking on a project to develop an application that displays real-time data using React. I have made the decision to utilize Pusher for managing this real-time data, along with exploring open third party APIs for retrieving information. For instance ...

Unable to transfer card from the top position in the screen

Utilizing Tailwind (flowbite) for the frontend of my project, I encountered an issue where the Navbar was overlapping the Card. I attempted using mt-8 to resolve the problem, but it did not yield significant changes. What adjustments should I make to achi ...

Checking the image loading functionality with Cypress

I am interested in testing Cypress to verify that an image is successfully loaded onto a page. Here is a snippet of my source code: import React from "react"; export default class Product extends React.Component { render() { return ( <div ...

Present a Java-generated JSON object on a JSP page using JavaScript

Hello, I am currently working on creating a Json object in Java and would like to display the same JSON object in JSP using JavaScript. Essentially, I am looking to add two more options in my select box using Ajax. The Ajax is being called and I can see th ...

Textfield removal from the input range is requested

I recently encountered an issue with my input range HTML code. Here is the initial code snippet: <input class="sliderNoTextbox" id="ti_monatlich" type="range" name="ti_monatlich" data-theme="d"> After some adjustments based on this helpful answer, ...

Unable to update latitude and longitude in state

Upon clicking on the map, I successfully retrieve the latitude and longitude coordinates which I then log in the console. However, when attempting to assign them to a state variable, I encounter the following error: https://i.stack.imgur.com/dwDaw.png I a ...

Stopping setinterval on click can be achieved by using the clearInterval function in

I've encountered an issue while using a slideshow on my website. The plugin I'm using does not have an autoplay feature, so I had to implement it using setinterval in my code. Below is the code I used: var myInterval, startInt = function(){ ...

Handling error reporting using JSON in jQuery AJAX post success

UPDATE: I have resolved the PHP errors mentioned in previous Answers, however, the issue still persists. I am attempting to implement an error message display in case of a failed POST request and a success message for successfully completed requests. Curr ...

show button after the page has finished loading

I have a button similar to this: <input type="submit" id="product_197_submit_button" class="wpsc_buy_button" name="Buy" value="Add To Cart"> However, I am encountering an issue where if the user clicks the button before all scripts are loaded, an e ...

What are the steps to gather user data and generate a roster of individuals currently online?

I am currently working on a way to gather information about the users who are currently logged into my website. Here's how it works: When a user enters my website, they have the option to choose a nickname using an input box. Then, there are five diff ...

Reset all filters in React MaterialTable - clear filters for individual columns and the global filter

I'm brand new to react and I'm struggling with implementing an action that clears all table filters. I have date, drop-down, text, and global filters in my table and I'm looking for a way to clear all of them with just one click. Check out ...

Vue.js compatibility issue with SelectBoxIt jq plugin causing malfunction

On a page with numerous dynamically generated select boxes, I am looking to incorporate the jQuery selectBoxIt plugin from . Using Vue js, where is the best placement for the following code snippet to connect the plugin with the select elements? $('. ...

Retrieving PHP output from multiple arrays using AJAX

I'm new to AJAX and I'm struggling to retrieve arrays. My goal is to update a notification bar in real time using AJAX. I've managed to update the count displayed on the balloon, but I can't figure out how to also fetch messages from My ...