CSS：在前台设置调整大小处理程序并更改大小 [英] CSS: Set resize handler in the foreground and change the size

问题描述

我有一篇有标题&页脚。对于本文，我使用 resize：both 调整对象大小。

如果我设置页脚宽度为文章宽度，我不能抓住浏览器调整大小处理程序。

I've got an article with header & footer. For this article, I use resize:both to resize the object.
If I set the footer width to the article width, I cannot grab the "browser resize handler" anymore. I tried it with z-index also, but to no avail.

1. 这是可能的设置浏​​览器调整大小处理程序到前台？


2. 我可以更改浏览器调整大小处理程序的大小吗？

HTML： / p>

HTML:

<article class="widget">
    <header class="widget-header"  draggable="true">
        <span>Title</span>
    </header>
    <section class="widget-content">
        <span>test test test test test test test test test 
            test test test test test test test test test 
            test test test test test test test test test 
            test test test test test </span>
    </section>
    <footer class="widget-footer">
        <span>Footer</span>
    </footer>
</article>

CSS：

.widget{
    position: absolute;
    margin: 4px;
    top:0;
    left:0;
    resize:both;
    overflow: auto;
    max-width: 400px;
    min-width: 200px;
    min-height: 150px;
    width: 300px;
    border: #000 2px solid;
    background-color: #999;
    /*.rounded-corners;*/
}

.widget-header {
    padding:2px 5px;
    background-color: #666;
    color: #CCC;
    /*.header-gradient;*/
}
.widget-content {
    position: absolute;
    top:20px;
    bottom:23px;
    border-top: #000 solid 2px;
    height:auto;
    padding:5px;
}
.widget-footer {
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    padding:2px 5px;

}

示例
尝试抓取示例中的resize处理程序...这是不可能的。

Example Try to grab the resize handler in the example... This is not possible.

推荐答案

您可以通过添加属性 pointer-events：none; ，这将指示元素永远不会是目标的鼠标事件。

You can fix this by adding the property pointer-events: none; to your footer, which will indicate that the element will never be the target of mouse events.

以下是更新版本：

.widget-footer {
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    padding:2px 5px;

    /* New styles below: */

    pointer-events: none;
}

对于更改resize句柄的显示，在CSS单独。当使用类似于jQuery UI来管理调整大小元素时，可以应用不同的句柄，但默认句柄是基于浏览器和操作系统的，目前不能更改。

As for changing the display of the resize handle, that can't be done in CSS alone. When using something like jQuery UI to manage resizing elements, you can apply a different handle, but the default handle is browser- and OS-based, and currently can't be changed.

此方法的缺点是，只有当您选择页脚之前和之后的区域时，才能选择页脚文本。要解决这个问题，你可以只改变页脚的右属性为〜10px，如果你不需要它有一个背景颜色/图像，使它不与调整大小手柄重叠。

The drawback of this method is that the footer text can only be selected when you select an area before and after the footer. To work around this, you can just change the footer's right property to be ~10px, if you don't need it to have a background color/image, to make it not overlap with the resize handle at all.

这篇关于CSS：在前台设置调整大小处理程序并更改大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！