Currently, I'm working on creating a website with three columns that allows users to scroll down each one independently.
I attempted to set the columns at 33% width, but whenever I add content, a strange gap appears at the bottom of the screen and prevents individual scrolling within each column.
I apologize if my explanation is unclear.
I'm not quite following your reference to a "strange segment", but it could be the margin/padding values from the html or body elements.
For a practical illustration, consider using overflow: auto on the columns. In my quick solution, I implemented a 33.33% width hack, but it would be advisable to apply proper flex-attributes for justified content distribution and add margins as needed.
html, body {
margin: 0;
padding: 0;
min-width: 100%;
min-height: 100%;
}
body {
display: flex;
}
.col {
overflow: auto;
max-height: 100vh;
width: 33.33%;
}<section class="col">
Insert lengthy content here...<br>
Add more lengthy content here...<br>
And some more lengthy content...<br>
Repeat lengthy content...<br>...you get the idea!
</section>Alternatively, you can utilize CSS grid
html, body {
margin: 0;
padding: 0;
min-width: 100%;
min-height: 100%;
}
body {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.col {
grid-column: 1 1;
overflow: auto;
max-height: 100vh;
}<section class="col">
Some extensive content...<br>
Some extensive content...<br>
Some extensive content...<br>
Some extensive content...<br>
Some extensive content...<br>
Some extensive content...<br>
Some extensive content...<br>
More extensive content...
</section>
<section class="col">
Even more extensive content...
</section>
<section class="col">
Even more extensive content...
</section>I am experiencing difficulty filling a List from a table: <div class="es"> <button class="btn btn-primary" [routerLink]="['add']">New User</button> </div> <div class="User_table" id="t02" > <div class="table ...
After deciding to experiment with CSS-grid, I encountered a frustrating roadblock. My goal was to create two fixed navigation bars on the left and right sides, with the main content in the center that would be scrollable. <div class="grid"> < ...
I am working on a fluid layout where I have a div that always matches the height and width of the browser window, regardless of resizing. Essentially, this div is set to be 100% height and width of the browser window. Inside this div, I have an image that ...
I attempted to utilize the :nth-child selector to target the first, third, and fifth elements with the class name "personal", but it did not work as expected. Is there an alternative method to specifically select these elements sharing the same class? I ha ...
Currently, I am retrieving data from a PHP file using miniAjax. The code snippet below demonstrates how the process begins: microAjax("genjsonphp.php", function(data) { var json = JSON.parse(data); var points = json; //code continues In the c ...
What is the process for verifying API keys in Django? I am currently using RapidAPI and they provide a key, but how can I authorize it with the URL? views.py def thanks(request): url = "https://webknox-trivia-knowledge-facts-v1.p.rapidapi.com/trivia/r ...
My frontend app heavily utilizes tables in its components, so I decided to create a generic component for tables. Initially, I defined a model for each cell within the table: export class MemberTable { public content: string; public type: string; // ...
Having an issue with passing a list value in the html select method using AngularJS. Here is my code: app.js $scope.subcategory = function() { var query = "SELECT unit FROM Length;"; $cordovaSQLite.execute(db, query).then(function(res) { ...
My Twitter application automatically posts the current title being broadcast on my web radio every 20 minutes. It includes details like the artist, number of listeners, and playlist, but does not display album covers. To work around this limitation, I am ...
As I begin, I want to mention that I have thoroughly reviewed all the sub sub menu questions, but unfortunately, I couldn't find anything that aligns with the code I currently have in place. Any assistance will be greatly appreciated. My current task ...
Having trouble sending emails through my website using AJAX. It seems like the data is not being utilized or sent properly. I managed to get it working some time ago, but haven't checked on it since and now it has stopped functioning for some unknown ...
I am trying to implement two input fields in my HTML, one for a starting point and another for an end point. The user will enter two times like this: For example: [8:15] - [14:30] alert("XXXXX seconds") I want to calculate the number of seconds between 8 ...
Utilizing Material-UI's Paper component (https://mui.com/components/paper/), I've encountered a scenario where the content within the Paper element needs to be dynamic. <Paper className="modal" elevation={3}> ...Content </Paper ...
Could someone provide assistance on how to resize an image using an img src="blah.jpg?width=x" so that my page can be displayed at various sizes? I just need x (width) as a JSP variable. Update 2021: It's been 9 years since this question wa ...
Hello, I am working on an HTML page where I need to apply CSS only if certain conditions are met. The div with the id "flipbook-page3-front" will always be present on this HTML page. Sometimes, another div with the id "pagesFlipbook" may also appear on t ...
Looking at the image, there seems to be a div with a width of 100% and no defined height. Instead, the height adjusts based on the content, with top and bottom padding in percentages. The issue arises when trying to place navigation buttons on the right si ...
As a beginner in using BeautifulSoup, I am currently exploring the following HTML segment: <div class="jpag" id="srchpagination"><a rel='prev' class="dis"><span>‹‹</span> Prev</a><span class ...
I'm a beginner in web development and currently practicing HTML, CSS, and Javascript. I've added a button to my html file and would like the color of the button to change when it's clicked on. Here is my HTML code: <button id="box&q ...
Consider this scenario <div class="col-md-my"> </div> .xx { color: black; } .yy { color: red; } Similar to how Bootstrap adjusts width at different breakpoints. Create a new class called col-md-my When the width exceeds the ...
Reviewing a colleague's CSS file, I stumbled upon an interesting section. They are a skilled CSS designer, so before jumping to conclusions, I wanted to make sure I am not missing something. In the code snippet below, it seems like they are unintenti ...