0

CSS が最初に次のように定義されている div があります。

.mydiv {
    position: absolute;
    top: 60px;
    left: 60px;
    right: 60px;
    bottom: 60px;
    background-color: cyan;
    overflow: hidden;
}

それは画面の境界線から等距離にあり、jQuery を介してドラッグできるようにしたかったのです。右と下の CSS ディレクティブが原因で、これは機能しません。

そこで私の次のアイデアは、次の CSS 定義を使用することでした。

.mydiv {
    position: absolute;
    width: 90%;
    height: 90%;
    margin-left: 5%;
    margin-top: 5%;
    background-color: cyan;
    overflow: hidden;
}

私の理解によれば、幅と高さが画面の幅/高さの 90% に等しい div を作成し、さらにマージン ディレクティブ (両側で 5%) によって画面の中央に配置されます。

このソリューションは 100% では機能しないようです。

それは水平に機能し、divは水平方向に中央に配置されますが、垂直方向には下部のスペースが上部のスペースよりも小さくなります。これは私が望んでいるものではありません。

別の方法で解決できることはわかっていますcalc()が、ブラウザの互換性（IE8）のために避けたいと思います。

私は何が間違っているのだろうと思っていましたか？

4

1 に答える 1

2

今日はちょっとバカです。

マージンを削除して使用しました：

top: 5%;
left: 5%;

そしてそれは私の問題を解決しました。

于 2013-08-09T11:05:56.407 に答える