What strategies can I use to make my div content more adaptable to different screen sizes and

Currently, in my project, I have implemented a layout using the top nav menu (purple part) and the left menu (pink part) as shown in the image. However, I am facing an issue where, upon deleting some content from the view, the pink menu on the left extends all the way down to the bottom, creating excessive white space on the page. I aim to make this layout more responsive so that it dynamically adjusts its height based on the content. As I am not well-versed in frontend development, I am unsure whether this issue pertains to HTML or CSS. I have tried searching for solutions but have been unable to find relevant keywords to address my problem. I hope I have effectively communicated the issue.

View Image: https://i.sstatic.net/4Vv6A.jpg

The problematic section is highlighted below:

https://i.sstatic.net/SYJi5.png

The HTML code for the pink part is as follows:

        <div class="col-md-3 top-nav">
            <div class="logo">
                <a href="index.html"><h1>Alperen Öz</h1></a>
            </div>
            <div class="top-menu">
                <span class="menu"> </span>

                <ul class="cl-effect-16">
                    <li><a class="active" href=""~/Homepage/home" data-hover="Anasayfa">Anasayfa</a></li>
                    <li><a href="#" data-hover="Fotoğraf Galerisi">Fotoğraf Galerisi</a></li>
                    <li><a href="#" data-hover="Hakkımda">Hakkımda</a></li>
                </ul>
                <!-- script-for-nav -->
                <!-- script-for-nav -->
                <ul class="side-icons">
                    <li><a class="fb" href="#"></a></li>
                    <li><a class="twitt" href="#"></a></li>
                    <li><a class="goog" href="#"></a></li>
                    <li><a class="drib" href="#"></a></li>
                </ul>
            </div>
        </div>
        @RenderBody()
        <div class="clearfix"> </div>
    </div>

Thank you in advance for your assistance! :)

Answer №1

It is recommended to place both the menu div and the view div within the same parent div and adjust the top-nav height: 100%. This way, when a view is deleted, the parent element will shrink in height, causing the 100% height to be reduced. Adding a new view will then expand the height, resulting in a pink color bar appearing on the left side as well. :D

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

Adjustable textarea with automatic height based on content and line breaks

Imagine you have a textarea with text that includes line breaks. If you style it like this: textarea { height: auto; overflow: hidden; resize: none; } Upon loading the page, the textarea will only adjust its height based on the content until it enc ...

When the browser is not in the foreground, clicking on the Bootstrap datepicker with Selenium does not register

When you click on the input field <input id="dp1" class="span2" type="text" value="02-16-2012"> If the browser is in the background, the datepicker popup will not display. Even using javascript or jquery to click the input field does not show the ...

Initiate a JavaScript confirmation dialog using server-side logic in ASP.NET

Does anyone know how to troubleshoot the issue with this code? I am trying to make it so that when btnOne is clicked and a is true, a confirm box pops up. If yes is selected, then it should execute the btnTwo method. Currently, the popup isn't appeari ...

Utilizing custom links for AJAX to showcase targeted pages: a beginner's guide

I am putting the final touches on my website and realized that it may be difficult to promote specific sections of the site because the browser address never changes. When visitors click on links, they open in a div using Ajax coding. However, if I want to ...

"When utilizing a jQuery AJAX request to communicate with a Node.js server, the functionality only seems to

I'm diving into the world of AJAX and feeling a bit lost. On my webpage, I use an AJAX GET request to fetch comments on a post. However, there's a glitch where the request only succeeds after refreshing the page. I even tried disabling the cache, ...

Issue with Bootstrap4: organizing columns correctly within and outside a container

I've hit a roadblock while working on a project and can't seem to find the right solution. I've already created a design in Photoshop to illustrate what I'm trying to achieve: Photoshop Design. Basically, I want the main content inside ...

Python is the way to go for clicking on a link

I have a piece of HTML and I am in need of a Python script using selenium to click on the element "Odhlásit se". <div class="no-top-bar-right"> <ul class="vertical medium-horizontal menu" dat ...

Form a collection of JavaScript arrays using a string that includes strings

Here is a string that needs to be converted into a JavaScript array: ['Value',2],['Value2',4],['Value3',10] To convert this to a JavaScript array, the following code can be used: var tmpStrings = "['Value',2],[&ap ...

Interactive div containing elements that cannot be clicked

http://codepen.io/anon/pen/zxoYBN To demonstrate my issue, I created a small example where there is a link button within a div that toggles another div when clicked. However, I want the link button to not trigger the toggle event and be excluded from the ...

Encountering an issue is common when trying to obtain a list of actors with a specific nationality like Argentine and sorting them by their full name

I am trying to filter actors by their nationality, specifically "Argentine", and sort them by fullName in ascending order. Below is my Actor Routes.js: router.get("/ask/actorsask", actorsCtrl.getActorByNationality); And this is my Actor controller.js e ...

What is the best way to connect an external JSON file to an Angular controller?

As I embark on my first Angular JS project, I find myself in need of exporting a JSON array from my controller to an external JSON file. Here is the snippet from my controller containing the JSON data: Fantacalcio.controller('fantacalcioController&ap ...

The newly added radio button does not function as a separate group as expected

I currently have a set of radio buttons: <input type="radio" class='form-control' name="progress_type[]" value="Journal Papers"><span class='radio-label'>Journal Paper</span> <input type="radio" class='form-co ...

Arranging input fields for different languages

I recently inherited a product that has been developed using AngularJS, and I have a query related to localization. Within the HTML code, there are two input fields of type 'input-number' - one for entering the number of days and another for spe ...

The function this.$set is failing to update an array in VueJS

I am facing an issue where the console log shows me the updated array xyz, but when I try to print it in the DOM using {{xyz}}, it does not update. Can anyone shed some light on why this might be happening? data() { return { xyz: [] } }, met ...

Tips for placing order import styles css module as the first line in eslint-plugin-import configuration

I'm currently setting up ESLint for my project, using `eslint-plugin-import` to organize module import order. However, I have a specific case with a style CSS module that I want to place at the beginning of the import list. How can I configure ESLint ...

Data loading issue with asp.net mvc Ajax

I am currently facing an issue while attempting to fetch data from the controller using ajax. Controller [HttpGet] public ActionResult GetServices() { var data = _bbdb.ListServices.Where(d => d.Status == true).ToList(); return Json(data, JsonR ...

The file could not be located on the server during the project build and upload process

Presently, I'm engrossed in a project involving Angular 9 and ASP Core 3. You can find the website at: Nevertheless, encountering an error when trying to access this URL: http://mag-testcpl.astromap.ir/assets/vendors/global/toastr.css The culprit ...

Utilize React JS to incorporate multiple instances of the Bootstrap carousel within a webpage using Reactstrap

I am having difficulty using the bootstrap carousel multiple times on a single page. I have attempted to copy it as a new item numerous times, but I keep encountering errors. <CarouselItem onExiting={() => setAnimating(true)} onExited={() => ...

What is the most effective method for generating dial images through programming?

Currently, I am in the process of creating a website that makes use of variously sized and styled dials to indicate progress. The filled portion of the dial represents how close an item is to being 100% complete. I am seeking a universal solution that wil ...

The functionality of php.js is compromised

I've been attempting to integrate php.js into my scripts, but have encountered a problem. I debugged a function and loaded it onto a single page containing only jQuery and php.js, yet it is still not functioning properly. <script src="http://code. ...