小编chr*_*sen的帖子

Flexbox,绝对定位和100%高度

我在一个绝对盒子里面玩一个弹性盒时会遇到一些问题,这个盒子位于一个定义的高度div内(我将在此处解释).

首先,这里是我演示的小提琴,可能更容易理解问题:https: //jsfiddle.net/8ub9tyub/

如您所见,当您悬停块时,文本从下方显示但不完全显示.

我有一个主要div(让我们称之为$ main)用于悬停部分,600x250px带有一个overflow: hidden,并且里面有两个div:标题和文本(比如$ title$ text),它们相互出现(常规流程) .

$ title有时会占用两行,因此其高度设置为auto. $ text设置为100%高度,以相对值设置并设置为display: flex.在里面是另一个div($ intro)我定位在绝对位置,a top: 100%(在悬停时切换为0)和a align-self: flex-end以保持在$ main的底部.(这是为了防止文字粘在标题上 - 我喜欢呼吸)

结构是这样的,基本上:

<div class="main">
 <div class="title">I'm a title!</div>
 <div class="text">
  <div class="intro"><p>Just a bunch of long paragraphs of text</p></div>
 </div>
</div>
Run Code Online (Sandbox Code Playgroud)

现在,正如你在我的演示中所看到的那样,$ text的高度设置为100%,但我预计高度为$ main 减去 $ title的高度,但这里似乎只是$ main的高度,这使$ text块溢出,因此当我将鼠标悬停在文本 …

html css css3 flexbox

4
推荐指数
1
解决办法
2万
查看次数

从 JSON 数据创建模拟 JavaScript 响应

我有一个应用程序可以进行很多异步操作fetch调用,其中一些是相同的。

\n\n

我有一个超集函数fetch(例如fetchPlus),通过根据参数为每个请求创建一个伪唯一标识符。这样,我就可以存储结果sessionStorage并访问它。

\n\n
function fetchCacheStore(hash) {\n    const storeItem = \'fetch_\' + hash;\n    return {\n        getCache: function () {\n            return JSON.parse(sessionStorage.getItem(storeItem));\n        },\n\n        setCache: function (data) {\n            sessionStorage.setItem(storeItem, JSON.stringify(data));\n            setTimeout(function () { sessionStorage.removeItem(storeItem); }, 25); // Clear the cache item shortly after\n        },\n    };\n}\n\nfunction fetchPlus() {\n    const stringHasher = function (s) { // Adapted from /sf/ask/533152301/#comment94234739_7616484\n        for (var i = h = 0; i < s.length; i++) {\n            h = Math.imul(31, h) + …
Run Code Online (Sandbox Code Playgroud)

javascript json fetch

2
推荐指数
1
解决办法
4990
查看次数

标签 统计

css ×1

css3 ×1

fetch ×1

flexbox ×1

html ×1

javascript ×1

json ×1