小编Cam*_*n A的帖子

有没有办法根据CSS中的百分比设置最小高度？

当我使用高度和最小高度时,我不能同时使用百分比,我正在寻找一种控制最小高度的方法,因为我的内容基于百分比并且它的高度发生了变化.

我无法将高度设置为自动,因为我需要高度为100%,最小高度也是基于百分比.

这是页面的设计,它应该是全屏,直到最小高度,但在1400到1100的范围内页面响应并且变小百分比,我想保持这些比例,我的意思是高度100%直到最小的特定高度,但因为我的内容高度变化我希望特定的最小高度也改变

<div class="outer">
    <div class="inner"></div>
</div>

body, html {
  height: 100%;
}
.outer {
    height:100%;
    background:red;
    /* MIN-HEIGHT ???????!!! */
}
.inner {
    position: absolute;
    background:blue;
    box-sizing: border-box;
    width: 60%;
    margin: auto;
    padding-top: 30%;
}

这是我的问题的小提琴,http://jsfiddle.net/LmDNx/1/

你可以看到我想把外部div的最小高度设置为内部div的大小,但内部div基于百分比,高度也是100%,最小高度是多少？

更新:你可以省略该位置绝对

我在地图循环内使用 ref 。我需要一个引用数组问题是引用仅针对列表中生成的最后一个元素这是我准备的示例，我需要通过引用列表在地图循环内的所有生成元素上运行自定义钩子

我正在寻找一种不引入另一个组件的方法

import React, { useRef, useState, useEffect, useCallback } from "react";

/// throttle.ts
export const throttle = (f) => {
  let token = null,
    lastArgs = null;
  const invoke = () => {
    f(...lastArgs);
    token = null;
  };
  const result = (...args) => {
    lastArgs = args;
    if (!token) {
      token = requestAnimationFrame(invoke);
    }
  };
  result.cancel = () => token && cancelAnimationFrame(token);
  return result;
};

const id = (x) => x;
const useDraggable = ({ onDrag …

我想要这样的东西

容器盒的宽度和高度都是固定的

盒子大小不同,如1*1或2*1或3*3和......但不大于4宽,3高

框上的数字是加载时框的索引

我试着写一个算法宽度这些条件

首先 - 将item1放在第一个位置(0,0)

第二个 - 第一个框创建2个位置:(0,1)和(1,0)

第三项 - 第2项应决定2个新位置,并适应最佳位置以减少差距

放置时,每个项目在其左上角和右下角产生2个新位置

我还必须检查容器和盒子区域的剩余区域,以检查容器是否已满

如果容器已满,则创建新容器并将其余项目放在那里

我发现了一些我的算法失败但我应该找到解决方案的例子

也许按区域和空间排序这些盒子是最简单的解决方案

但我不喜欢它becuz它beaks设计我的意思是在顶部更大的盒子和底部的小盒子:(这是不好加我想在infinte滚动上加载这些盒子然后我不知道我的下一个盒子大小是什么所以我不能根据地区放置它们

在我放弃之后,我检查了所有关于这种设计的插件

像同位素和砖石和香草砖石和格栅和......

我试着定制同位素

JSfiddle链接显示我的尝试 链接

<a href="#" id="good">Shuffle</a> |
<a href="#" id="bad">Original order (broken)</a>
<div id="container">
   <div class="item w1 h1">1</div>    
   <div class="item w2 h1">2</div>
   <div class="item w1 h2">3</div>
   <div class="item w1 h1">4</div>
   <div class="item w2 h2">5</div>
   <div class="item w2 h1">6</div>
   <div class="item w1 h1">7</div>
   <div class="item w1 h1">8</div>
   <div class="item w1 h2">9</div>
   <div class="item w2 h2">10</div>
   <div class="item w2 h1">11</div> …

我正在尝试添加转换,但它不起作用我添加转换到我的链接并期望悬停状态的变化我使用转换很多,但有时这发生在我身上,我不知道为什么这个属性不起作用

我更愿意知道为什么它不起作用

这是我的代码

<div class="subNavigation">
                        <ul>
                            <li>?????? ???? ???</li>
                            <li><a href="javascript:void(0)">?????? ???? ??? 1</a></li>
                            <li><a href="javascript:void(0)">?????? ???? ??? 2</a></li>
                            <li><a href="javascript:void(0)">?????? ???? ??? 3</a></li>
                            <li><a href="javascript:void(0)">?????? ???? ??? 4</a></li>
                        </ul>
                    </div>

和css

.subNavigation {
 width: 900px;
 height: 274px;
 position: absolute;
 top: 40px;
 right: 0;
 padding: 30px 60px 0 0;
 }
 /* line 126, ../sass/style.scss */
 .subNavigation ul {
 float: right;
 }
 /* line 130, ../sass/style.scss */
 .subNavigation li {
 width: 153px;
 *zoom: 1;
 margin-top: 4px;
 padding-right: 2px;
 padding-bottom: 4px;
 border-bottom: …

我在我的网站上有一个分享按钮,我想向Telegram APP联系人发送特定消息(当我在Mobile中打开网站时)

问题是我没有找到完整的代码,它只是在移动设备中打开APP

我的代码是:

<a href="tg://" id="telegram_share" class="mobileShare" title="inviteFriends" alt="telegram_share"></a>

如你所见,我没有找到在href属性中发送消息的正确命令

例如,我找到了类似于添加贴纸的类似物:

<a class="tgme_action_button" href="tg://addstickers?set=Saber2">Add Stickers</a>

我正在尝试传递元素索引并使用延迟滑动每个列表项内容

这是我的代码

    for(var i = 1; i <= $("#colContainer li").length ; i++) {
        var el = $("#colContainer li:nth-child(" + i + ") .colContent");

        var delay = function() {
            slide(el);
        };
        setTimeout(delay, 10);
        function slide(el){
            el.slideUp();
        };
    };

但每次只是最后一个滑起来

我期望他们从索引1滑到延迟结束

我也尝试过这个

    index = $(this).parent("li").index();
    for(var i = 1; i <= $("#colContainer li").length ; i++) {
        (function(i) {
            var el = $("#colContainer li:nth-child(" + i + ") .colContent");

            var delay = function() {
            slide(el);
            };
            setTimeout(delay, 10);
            function slide(el){
            el.slideUp();
            };
        })(i); …