Is there a way to add a vertical scroll bar using percentages for height and width instead of pixels? Check out this link to see an example on my website: http://codepen.io/anon/pen/FLlvG. I would like the scrollbar to be in the leftcontent section.
Is there a way to add a vertical scroll bar using percentages for height and width instead of pixels? Check out this link to see an example on my website: http://codepen.io/anon/pen/FLlvG. I would like the scrollbar to be in the leftcontent section.
To address the inquiry, here is a proposed resolution:
HTML Code
<div id="container">
<div id="sidebar">
<ul>
<li> Item A </li>
<li> Item B </li>
<li> Item C </li>
<li> Item D </li>
<li> Item E </li>
<li> Item F </li>
<li> Item G </li>
<li> Item H </li>
<li> Item I </li>
<li> Item J</li>
<li> Item K </li>
<li> Item L </li>
<li> Item M </li>
<li> Item N </li>
<li> Item O </li>
<li> Item P </li>
<li> Item Q </li>
<li> Item R </li>
<li> Item S </li>
<li> Item T </li>
</ul>
</div>
<div id="main">
<p>Here comes some dummy text for illustration purposes. This text has been used in various industries to showcase printing and design capabilities throughout history.</p>
</div>
</div>
CSS Styling
#container { width:700px; border:2px solid blue; margin:0 auto; position:relative; }
#sidebar { position:absolute; left:0; top:0; width:200px; height:100%; background-color:pink; overflow-y:scroll; }
#main { margin-left:200px; }
p, ul { padding:12px; }
The default setting for the
heightandwidthattributes is 'auto'. Theheightis determined by the container's content, while thewidthis based on the available horizontal screen space.
Therefore, if you want to use a percentage value for the height property in a container, you need to provide a height for the parent element using other units such as pixels (px) or points (pt).
To correct your CSS code (on codepen), make sure it looks like this:
.content {height: 150px;}
.leftcontent {height: 50%;}
Take a look at this jsfiddle.net/Yajju/ . I have incorporated inline css directly in the HTML code.
Users can input any type of HTML, including JavaScript, into a textarea on my website. They can then preview their input in a browser by submitting it to a PHP backend that displays the content in a template. I understand the risks of XSS, but I only allow ...
I'm facing an issue with my ui-grid configuration. The setup includes a ui-grid with an expandable row template that loads an HTML file containing another ui-grid. Within this "subgrid," there is another expandable row template with another HTML file ...
I've been facing challenges with adjusting the height of this image to match the div container. I've experimented with various height properties such as max-height, min-height, normal height, auto, and 100%, but none seem to be providing the desi ...
My HTML code takes a user input number, performs a calculation using a formula, and displays the output. The chosen input is inserted into the formula, and the result is added to the original number. However, there seems to be an issue with adding decimal ...
In my current project, I have implemented a feature where shapes are generated by spinning the mouse wheel. One specific shape in focus is the triangle, but other shapes follow the same generation process. The goal is to create a trail that slowly fades ...
Currently, I am utilizing the Google Chrome Console to extract an array of elements that are tagged with the class name attrValue. This is the line of code I am using: $x('//*[@class="attrValue"]'); Below is the output of my code: <td class ...
Currently, I am in the process of mastering React and developing a small online electronic store. Within my project, there is a tab labeled "View Store". My goal is for a small, hidden column to appear when a user clicks on this tab, revealing text or imag ...
I'm encountering a problem with fetching mouse positions on the Firefox browser. It seems like there's an issue in my code causing it not to work correctly. Here is what I have done so far. Javascript Code: function GetMousePosition(event){ ...
Consider this block element : <div style="background-color: gray; line-height: 30px;"> Some text and a <a style="background-color: yellow;">link<\a> <\div> Why is it that the yellow color does not extend the full hei ...
How can I display the status of users with three different levels in a list view? I need to show whether they are attending or not, similar to the image provided. The issue is that currently the checkbox appears below the name, but I want it to be at the r ...
Could you help me with a question that involves matching pairs of words in both Russian and English? <div class="form-group" id="question4"> <label for="q4FirstSelectEN">4</label> <div class="row"> <div class="col-lg ...
My form incorporates the Canada Post AddressComplete tool, which functions similarly to Google Maps Autocomplete. As you type your address, suggestions appear in a drop-down menu. However, after selecting an address, the text in the Postal Code and City f ...
Currently, I am utilizing the Menu component from material-ui and facing an issue while trying to modify the background color. The problem arises when I attempt to apply a color to the Menu, as it ends up altering the entire page's background once the ...
Currently, I am working on a project offline and trying to make Brackets' live preview feature work smoothly. It has proven to be quite convenient for my tasks. While opening my project files using the "open file" option in Brackets, I encountered an ...
When using http.responseText, it seems to not work properly in Chrome. Is there a way to modify this line so that it does? ...
I am working on a layout that includes a module containing various content. My goal is to have the progress bar, along with the labels "parts" and "projects," positioned underneath an image and expand to the full width of the module when the window size go ...
Is there a way to use jQuery to alert the user if they try to select the same value from a checkbox more than once? <div> <input type="checkbox" class="check" value="1"/> </div> <div> <input type="checkbox" class="check" ...
I am considering implementing the code snippet below. Will it deactivate the text box even when I'm adding a new entry? <input id="code" data-bind="value: Code" name="Code" type="text" placeholder="Your Code" class="form-control input-md" readonly ...
Recently, I began my journey with ionic vue and started incorporating CSS with the components. I added styles in the same file like this: <style scoped> .abc { background-color: blue; } </style> I attempted to apply these style ...
In the code snippet below, I am uploading an image and manipulating it using JavaScript: > var canvas = document.createElement('canvas'); > var context = canvas.getContext('2d'); > context.drawImage(image, 0, 0); While the ab ...