Lets say there is something like this:
<div class="parent">
<div class="child">
</div>
</div>
How to make parent to occupy the entire screen height?
And how to make child to be scrollable, if its height exceeds the parent height(which is screen max height).
I tried something like this:
.parent{
height: 100vh;
}
.child{
overflow: auto;
}
Apply overflow rule to the parent div, see working example below:
html, body {
height: 100%;
margin: 0;
font-family: sans-serif;
}
.parent {
overflow: auto;
height: 100vh;
padding: 10px;
border: 1px solid #ccc;
}
.child span {
height: 100vh;
display: block;
background: gray;
padding: 10px
}
.child span:nth-child(odd) {
background: lightgray
}
<div class="parent">
<div class="child">
<span>Child container 1</span>
<span>Child container 2</span>
<span>Child container 3</span>
</div>
</div>
Instead of your CSS, try to apply this CSS:
html, body{
overflow:hidden;
}
.parent{
height: 100vh;
overflow: scroll;
}
Here is the link to the fiddle supporting it.
html,
body {
overflow: hidden;
}
.parent {
height: 100vh;
overflow: scroll;
}
<div class="parent">
<div class="child">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit
amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing
elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum
dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet,
consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing
elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum
dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet,
consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing
elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit" "Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum
dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit"
</div>
</div>
Related
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 11 months ago.
I made a menu whose container using flexbox, I want this menu to only have 2 columns, and if there are many menus it can only scroll vertically not horizontally. But I want each menu to have a close distance. I've made the code and css like the snippet below, but when there is a menu that has many children, the menu next to it has too much gap. how to solve this?
.menu-dropdown{
height: 200px;
overflow:auto;
}
.wrapper-container{
min-width: 560px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-height: 300px;
}
.menu-item{
max-width: 50%;
width: fit-content;
display: flex;
}
<div class="menu-dropdown">
<div class="wrapper-container">
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
</div>
</div>
No, row-flex ain't gonna work here. If you want a vertical scroll, column-flex will work neither.
The behaviour you are trying to achieve is created via columns:
.wrapper-container{
columns: 2;
}
.menu-item{
break-inside: avoid-column;
}
Here's an example codepen
HTML:-
ul {
list-style-image: url(https://i.stack.imgur.com/yGSp1.png);
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
</ul>
I am trying to put image as bullet in list item but the issue is image and list item text is not in same line.
screenshot of output here
image link (images is 16px X 16px)
You can use it as a pseudo element and you will have better control on the position and also the size:
ul {
list-style:none;
}
li {
position:relative;
}
li:before {
content:"";
position:absolute;
top:2px;
left:-20px;
width:16px;
height:16px;
background:url(https://i.stack.imgur.com/yGSp1.png);
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
</ul>
I feel like there's a simple way to do this, but I just can't think of/find a solution...
I have a <table> that that should scroll-x if it overflows (which it's expected to) The <td> elements are set to max-width: 300px. I want the text in the <td> to wrap ONLY AFTER the <td> has hit the max-width. Right now text is wrapping as soon as the <table> doesn't fit its parent <div>.
How can I make the <td> expand to its max width before the text wraps?
Here's a fiddle: https://jsfiddle.net/ds99unpz/2/
EDIT: to clarify...
If the td doesn't have to be 300px wide to fit the text on one line, I don't want it to be 300px. If the text is too long to fit in a 300px td, THEN I want the td to be 300px wide and the text to wrap.
I updated your JSFiddle. It coerces the tables and cells to act like block's and inline-block's, respectively. Then using a little white-space: nowrap; magic and forcing the table to overflow, we get the desired result. However, the cells aren't all the same height.
.scrollable {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
table{
height: 150px;
}
td {
max-width: 200px;
white-space:nowrap;
overflow-x: scroll;
}
<table class="table table-striped">
<tr>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
</table>
EDIT:,
Added style="white-space: nowrap" to <td>
HTML:
<table class="table table-striped">
<tr>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
</table>
CSS:
.scrollable {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
table{
height: 150px;
}
td {
max-width: 200px;
white-space:nowrap;
overflow-x: scroll;
}
Fiddle
Or all css
<table class="table table-striped">
<tr>
<td style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
</table>
CSS:
.scrollable {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
table{
height: 150px;
}
td {
max-width: 200px;
white-space:nowrap;
overflow-x: scroll;
}
Fiddle
I have a structure which cannot be changed due to some reasons.Here is the structure:
<h1>heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consecadipiem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet]consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sitg elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. Se</p>
<div style="width: 200px; height: 200px; background: #f1f1f1">container</div>
I want to get this particular layout using CSS only, ie. no positions, negative margins etc. The HTML elements will remain in same flow - h1, p and div. Is it possible to do this?
This should work for you. The main thing is to put float: left on the left hand div.
<style type="text/css">
#wrapper {
width: 90%;
}
#container {
float: left;
width: 200px;
height: 150px;
background-color: #666;
margin: 0 10px 10px 0;
}
H1 {
font: bold 2em arial;
}
P {
background-color: #ccc;
}
</style>
<div id="wrapper">
<div id="container">#container</div>
<h1>Heading</h1>
<p>
Some text.
</p>
</div>
Example fiddle
Of course you can do that in CSS only! :)
I know this is an old question, but its a fun challenge. The trick is to create a pseudo element before the h1 that floats left to create the space for the container div.
I'm sure there are many other ways to do this...
div {
position:absolute;
top:0;
}
h1::before {
content:'';
float:left;
width:200px;
height:200px;
margin-left:20px;
}
<h1>heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consecadipiem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet]consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sitg elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. Se</p>
<div style="width:200px; height:200px; background:#f1f1f1">container</div>
I need to add a custom class to every anchor tag found within h1 tags, leaving all other anchor tags untouched.
At the moment I have:
$content = preg_replace("/(<h1.*?<a.*?)/i","$1 class=\"mystyle\"",$content);
The problem with the above is that it only adds my class to the first anchor found in any h1 header and I'm really struggling to figure out how to correct this.
To clarify,
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
Becomes,
<h1><a class="mystyle" href="page.html">Lorem</a> ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1><a class="mystyle" href="page.html">Lorem</a> ipsum dolor sit amet, consectetur adipiscing elit.</h1>
Bit of a regex beginner so apologies if this is a really stupid question,
I have searched for hours and hours trying to get this on my own so I hope someone can help!
Cheers
Done with the help of $xpath->query('//h1//a');