73 lines
No EOL
1.4 KiB
Markdown
73 lines
No EOL
1.4 KiB
Markdown
Tips
|
|
|
|
- A css question. If I have a div container whose height is unknown.
|
|
Inside it we have a nav section whose height we don't know too.
|
|
How to make sure that next block inside container takes rest of the height.
|
|
Normally if there is no other block above it then we can simply use height:100% but here it will overflow.
|
|
```css
|
|
#parent {
|
|
display:flex;
|
|
flex-direction: column;
|
|
}
|
|
#secondBlock {
|
|
flex: 1;
|
|
}
|
|
|
|
```
|
|
To get more info about how flex-1 behaves check the following
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="style.css">
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
<div class="flex w-500">
|
|
<div class="flex col ">
|
|
<div class="users">Users</div>
|
|
<div class="reviews">Reviews</div>
|
|
</div>
|
|
<div class="flex flex-1">
|
|
<div class="">Notifications</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
```css
|
|
.w-500{
|
|
width: 500px;
|
|
}
|
|
|
|
.flex{
|
|
display: flex;
|
|
}
|
|
|
|
.col{
|
|
flex-direction: column
|
|
}
|
|
|
|
.flex-1{
|
|
flex: 1;
|
|
}
|
|
```
|
|
|
|
- there is sidepanel at right side which expand. it have invisible extra width so each item can expand to that when hovered but that invisible portion i dont want it to effect rest of page. and able to interact with. how do i fix it
|
|
```css
|
|
.parent{
|
|
pointer-events : none;
|
|
}
|
|
|
|
.child{
|
|
pointer-events : auto;
|
|
}
|
|
|
|
.child:hover{
|
|
...
|
|
}
|
|
|
|
``` |