相對更改div大小的整個內容

Question

有一個類似下面的HTML代碼：

<div class="home">
    <img id="back" src="" />
    <div class="menu">
        <ul>
            <li><a href="#">link1</a></li>
            <li><a href="#">link2</a></li>
            <li><a href="#">link3</a></li>
            <li><a href="#">link4</a></li>
            <li><a href="#">link5</a></li>
        </ul>
    </div>
    <div id="data" class="data">
       a few data that will change for every page, in fact content of each link will comes here by ajax.
    </div>
</div>

此處的所有內容在寬度和高度上均具有按像素表示的絕對大小，現在我想將此div中的整個內容最小化90％，因此它們的位置都不會改變。 實際上，我更喜歡將整個代碼放入另一個div，並使其比實際大小小一點。

怎么可能呢？ 我更喜歡CSS，但是jquery也可以。

Answer 1

CSS3方法：

.home {
  -webkit-transform: scale(.9);
  -moz-transform: scale(.9);
  transform: scale(.9);
 }

預計到達時間：請注意瀏覽器對transform屬性的支持 。

Answer 2

我猜是這樣的

<script>
function resize() {
   $("div#data").height(10*$("div#data").height()/100);
}
</script>

Answer 3

試試這個

<script>
function hideMenus() {
   $(".menu").find("ul").hide();
}
</script>