Kullanıcıya bir panelin yeniden boyutlandırılabileceğini göstermek için bir tanıtıcıyı nasıl gösteririm?

Question

Kullanıcının kendi beğenisine göre yeniden boyutlandırabileceği bir kenar çubuğu yapmaya çalışıyorum. Yeniden boyutlandırabileceğinizi göstermek için, üzerinde bir tanıtıcı koymak istiyorum (Stack Overlfow'un soru kutusunu nasıl sürükleyebileceğinize benzer ve daha uzun).

İçinde bulunduğum sorun, kenar çubuğundaki çapa etiketlerinin, tutamacı kenar çubuğunun tüm yüksekliğinden kaldırmasını engellemesidir.

HTML:

<div id = "container"> 
    <a href="#">Something</a> 
    <a href="#">Another thing</a> 
    <a href="#">Last thing</a> 
    <div id = "handle"></div> 
</div> 

CSS:

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

#container { 
    height: 100%; 
    width: 250px; 
    border: 2px solid black; 

    text-align: center; 
} 

#handle { 
    height: 100%; 
    width: 2px; 
    float: right; 
    background-color: red; 
} 

a { 
    display: block; 
} 

Fiddle: https://jsfiddle.net/un3huxee/1/

sağda kırmızı çubuk olacağını işlemek temsil, ama orada olduğunu açıkça görebilirsiniz görsel bir problem. Bu, kenar çubuğunun position'unu başka bir şeye dönüştürmek meselesi midir?

Answer 1

Sen #handle elemana #container elementi ve position: absolute için position: relative uygulamak ve üst ve sağ pozisyonları ekleyebilir.

---

ya da kullanım kutusu gölge yerine gerçek bir eleman

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 

 
#container { 
 
    height: 100%; 
 
    width: 250px; 
 
    border: 2px solid black; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
#handle { 
 
    height: 100%; 
 
    width: 2px; 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
    background-color: red; 
 
} 
 

 
a { 
 
    display: block; 
 
}

<div id="container"> 
 
    <a href="#">Something</a> 
 
    <a href="#">Another thing</a> 
 
    <a href="#">Last thing</a> 
 
    <div id="handle"></div> 
 
</div>

az parazit olması.

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 

 
#container { 
 
    height: 100%; 
 
    width: 250px; 
 
    border: 2px solid black; 
 
    text-align: center; 
 
} 
 

 
.handle { 
 
    box-shadow: -3px 0px 0 0 #f00 inset; 
 
} 
 

 
a { 
 
    display: block; 
 
}

<div id="container" class="handle"> 
 
    <a href="#">Something</a> 
 
    <a href="#">Another thing</a> 
 
    <a href="#">Last thing</a> 
 
    <!--div id="handle"></div--> 
 
</div>