动态CSS圈内div [英] dynamic css circle inside div

问题描述

我一再搜索论坛和谷歌 - 尝试了各种不同的事情，但我无法完成它......

我想要拥有一个页面的代码，一个固定的页眉和页脚，它的中间有一个居中的圆圈，动态地改变大小，并且不会溢出到页眉或页脚中。

请看一看在我的例子中：

https://jsfiddle.net / p90pq8b3 / 3 /

我很新，所以这一切，但坦率地说，我有点惊讶为什么

  document.getElementById（'circle'）。style.height = document.getElementById（'circle'）。style.width; 
  

似乎被忽略了。

解决方案

试试：
css：

  #circle {
 position：绝对; 
 
  

js：

  var w = $（'＃circle'）。width（）; 
函数f（）{
 $（'＃circle'）。height（$（'＃circle'）。width（））; （$（'＃circle'）。height（）> $（'。wrapper'）。height（））{
 $（'＃circle'）。height（$（'。 。包装器'）的高度（））; 
 $（'＃circle'）。width（$（'。wrapper'）。height（））; （$（'。wrapper'）。height（））
} else if（$（'＃circle'）。height（）< w）{
 $（'＃circle'）。 ; （$＃
 $ b）
 if（$（'＃circle'）。width（）> $（'。wrapper'）。width（））{
 $（'＃circle '）.WIDTH（$（' 包装。）宽度（））。 
} 
} 
 f（）; 
 $（window）.on（'resize'，function（）{
 f（）
}）; 
  

https://jsfiddle.net/uyt9z1qp/4/

Hi I have repeatedly search the forum and google - tried all sorts of different things but I can't get it done...

I am trying to have a code a page with a fixed header and footer which has a centered circle in middle that changes size dynamically and does not overflow into either header or footer.

Please have a look at my example:

https://jsfiddle.net/p90pq8b3/3/

I am quite new so all of this but frankly I am a bit surprised why

 document.getElementById('circle').style.height = document.getElementById ('circle').style.width;

seems to be ignored.

解决方案

try: css:

#circle{
  position: absolute;
}

js:

   var w = $('#circle').width();
function f() {
 $('#circle').height($('#circle').width());
  if ($('#circle').height() > $('.wrapper').height()) {
    $('#circle').height($('.wrapper').height());
    $('#circle').width($('.wrapper').height());
  } else if ($('#circle').height() < w) {
    $('#circle').width($('.wrapper').height());

  }
  if ($('#circle').width() > $('.wrapper').width()) {
    $('#circle').width($('.wrapper').width());
  }
  }
f();
$(window).on('resize', function() {
f()
});

https://jsfiddle.net/uyt9z1qp/4/

这篇关于动态CSS圈内div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！